JavaScript var, пусть и переменные Const объяснены историями

Автор оригинала: FreeCodeCamp Community Member.

Prarthana S. Sannamani

В этой статье мы рассмотрим историю var в JavaScript, необходимость Пусть и Const и различия между ними.

Этот пост состоит из двух разделов: вымышленное изделие и техническое объяснение.

Вымышленная часть предназначена для облегчения новичков в концепции, но несколько частей упрощены и не всегда присутствуют точные аналогии 1: 1.

Давайте начнем!

Сказка о трех переменных

Город JavaScript был шумным городом рядом с морем с коммерческим районом, наполненным высокими зданиями.

С незапамятных времен жители города JavaScript используются Варьироваться Ящики для хранения своих ценностей, особенно их ценовых золотых мрамор. Для этого жители имели два варианта:

Они могли бы разместить золотые мраморы прямо в коробку (пройти по значению)
Если у них было большое количество золотых мрамор, чтобы они не поместились в коробку, они могли бы разместить специальный лист бумаги в коробке, что указало, где они их хранили. Например, лист бумаги может сказать «второй ящик в шкафу хранения» (пропуск по ссылке)

Поскольку город гордился законом и порядком, они создали несколько правил и процедур.

Правила для магазинов

Чтобы сохранить безмятежность города, магазины могут быть построены только на холмах (функции создают свой локальный объем)
Единственное исключение из правила 1 было специальный магазин на уровне моря (глобальный объем).
Магазин может иметь внутренние магазины, чтобы помочь покрыть аренду (вложенные функции). Однако каждый внутренний магазин должен был быть на более высоком холме, чем холм магазина хозяина (локальная функция).
Магазин мог бы иметь «специальные предложения», такие как « Если Вы более 20 лет, купите здесь специальную коробку». И ” для (каждый) ребенок ваша семья, купите детскую коробку здесь” (другие блоки, такие как если и петли).
Каждый магазин должен был иметь счетчик «декларации-инициализации» с охраной у входа, который сохранил журнал регистрации (поднимаясь в верхней части соответствующей области).
Каждый магазин может иметь неограниченное значение «назначение» счетчиков с помощью магазина, который бы поместил золотые мрамор резидента в коробке.

Правила для регулирования рынка коробки

Ящики могут быть приобретены только из специального магазина уровня моря или из магазина на холмах (переменная может иметь глобальную или локальную область).
На уровне моря или на любом холме жители могут владеть только одним цветным Варьироваться коробка (дубликаты идентификаторов не допускаются).
Варьироваться Коробка никогда не могла быть пустым с момента его созданного. Он должен был содержать хлопок ( undefined ) или золотые мраморы во все времена (эффект подъема).
Как только резидент вышла в магазин (и, следовательно, спустился на холм), все коробки, которые они приобрели в нем, исчезли (конец объема переменной).

Процедура для жителей, чтобы купить «варьирующиеся коробки»

Мы будем следовать путешествию резидента Джона в этой статье.

Джон входит в магазин и объявляет, какой цвет Варьироваться коробка он желает купить в счетчике «Декларация-инициализация». Охранник отмечает это в своей регистрационной книге.
Охранник вызывает вроде цветных Варьироваться коробка, наполняет его хлопком и руками ее к Джону.
Джон получает билет за свою очередь, и когда он прибудет, он направляется в счетчик «Назначение». До тех пор он может держать его коробку, но не может поместить его золотые мраморы в нем.
На прилавке Джон вручает в его коробку и золотую мрамор к магазине помощника, который удаляет хлопок, помещает золотую шарику внутри и руками его обратно.

Естественно, эти правила привели к своеобразным проблемам.

С долгом времени ожидания для «присваивания» Джона забудут, что он еще не разместил свои золотые мрамы в его коробке. Он откроет его, чтобы похвастаться своим друзьям и найти только хлопок. Обременять!
Зачастую Джон забудет, что он уже купил определенную цветную коробку в магазине и вновь зарегистрироваться для того же цветного коробки снова. Это мгновенно приведет к исчезновению его существующей коробки (и золота мрамор !!), а затем охранник, прикосновение новой коробки, наполненной хлопком. Нет предупреждения! Это было особенно распространено на счетчиках «Специальные предложения».

Вы можете себе представить, насколько разочаровывает эту ситуацию. С жителями города JavaScript, теряя свои мрамор, городской совет решил принять меры.

На встрече Гранд-город в 2015 году они с гордостью представили две новые коробки: Lety и Постоянный Отказ

Они также представили другие серьезные изменения: удаление счетчиков «Специального предложения» от Lety и Постоянный Магазины. Вместо этого эти счетчики были обновлены до внутренних магазинов, которые были построены на холме внутри магазина.

Правила покупки “Leyy` и” Постоянные коробки

Джон входит в магазин и объявляет, какой тип и цвет коробки он желает купить на «декларации» счетчике. Охранник отмечает это в своей регистрационной книге. Эта информация озерается на огромных настенных часах, которые можно увидеть, но не используемое и называется «временной мертвой зоной».
Джон получает билет за свою очередь. Поскольку коробка не создается при декларации, он не доступен для использования.

Это где Lety и Постоянный Правила покупки расходятся.

`Правила Leley:

После того, как повод Джона прибыл, он направляется в счетчик «инициализации».
На стойке Джон имеет выбор, чтобы купить пустую Lety коробка или купить Lety коробка и у его золотых мрамор сразу помещена в него.
В зависимости от его выбора, магазин-ассистент имеет отношение Lety Коробка и наполняет его хлопком или руками его в счет «Назначение», где золотые мраморы Джона помещают внутри него.

«Постоянные правила

Постоянный коробки – это Чрезвычайно специальный. Выровняются слоем золота внутри и запечатаны блокировкой, эти коробки настолько дороги к магазинам, которые они отказываются продавать их, не зная, что именно будет размещено в них.

Когда поступление Джона прибывает, он направляется в счетчик «назначение инициализации».
Джон это Требуется Передать его золотые мрамор для магазина, который вводит в себя цветные Постоянный коробка, помещает золотую мрамор внутри, а блокирует коробку навсегда Отказ

Если вы помните, Джон мог напрямую поместить его золотые мрамор в коробку или поместить специальную лист бумаги, которая указывала на местонахождение его золотых мрамор.

Если он помещает его золотые мрамор в Постоянный коробка, он не может добавить или удалить их больше. Они заперты навсегда.
Однако, если он помещает специальный лист бумаги, это немного отличается. Пока он не может заменить Статья, он может добавить или удалить его золотые мрамор в месте, которое он указал на бумаге.

Давайте вернемся к своеобразным проблемам, которые вызвали изобретение Lety и Постоянный коробки и решают, будут ли они решены.

С Lety и Постоянный Коробки не создаются до Джона отправиться в счетчик «инициализации» или «назначение инициализации», соответственно, он знает, что у него нет коробки, и, таким образом, не пытается его использовать. Даже если он делает, громкие тревоги, установленные в магазинах, начинают звонить, чтобы предупредить его о факте.

Это обрабатывается от удаления счетчиков «Специальных предложений» и введением правила ниже:

Как только резидент регистрирует определенную цветную коробку на столе «Декларации» в Упустить или же Повседневный Магазины, он больше не может перерегистрировать для того же цветного коробки в этом магазине! Если он делает, громкие тревоги начнут ветать.

Эти замечательные новые коробки и правила купили мир и безмятежность для города JavaScript еще раз, и все жили счастливо.

Дайвинг в технические детали

Давайте перейдем по техническим аспектам var , Пусть и Const понять историю.

Если вы не знакомы с подъемным подъемником и объем (уровень функциональности и уровнем блока), я рекомендую прочитать мою предыдущую статью здесь Отказ

Вот экстракт, чтобы понять аналогию холмов, которые я использовал выше:

Жизненный цикл переменной

Фаза декларации : Регистрация переменной в его объеме, которая может быть глобальной/функциональной/блокской областью. На этом этапе пока не выделяется память.

Фаза инициализации : Распределение памяти для переменной, где создается привязка, и переменная инициализируется с помощью undefined Отказ

Фаза назначения : Задание значения для переменной.

Важно отметить, что переменная декларация и этап декларации не одинаковы!

Переменная декларация – это заявление, такое как var a Отказ

Этап Декларации представляет собой шаг, проводимый компилятором JavaScript. На этом этапе, когда компилятор сталкивается с переменной декларацией, он объявляет/регистрирует его в соответствующем объеме (если декларация еще не существует). Позже код, сгенерированный компилятором, выполняется двигателем JavaScript.

вар

Глобальная область или функциональная область
Значение может быть обновлено
можно повторно объявить
Подниматься: зарегистрировано в области применения и инициализирована с неопределенный

Ниже приведен простой пример, где мы инициализируем переменную, обновляйте ее значение, и повторно объявляем его.

// Hoistedconsole.log(a); // undefined

var a = 10;console.log(a); // 10

a = 20; // value updated: OKconsole.log(a); // 20

var a = 30; // re-declared: OKconsole.log(a); // 30

В верхней части объема все переменные объявлены в их соответствующем объеме и инициализированы со значением undefined Отказ Регистрация и инициализация связаны. Таким образом, переменная А Доступен для использования с вершины объема. Поэтому, когда мы пытаемся получить доступ к значению А До того, как он будет объявлен, он не бросает ошибку. Скорее, undefined печатается. Это известно как переменная подтяжка.

Ниже приведен пример, который показывает функцию объема var Отказ

function outerFunc() {  var a = 10;  if (a > 5) {    var a = 20;    console.log(a); // 20  }  console.log(a); // 20}

Переменная А Первоначально объявлен в объеме SwitchFunc Отказ Так как Если Блок не создает нового объема, когда мы повторяем переменную А более ранняя переменная А уничтожается и новая переменная А создается со значением 20 Отказ

Случайное повторное объявление var Переменные – это распространенная ошибка разработчиков из-за бесшумной реединки и путаницы в понимании функциональной области.

позволять

Блок слез
Значение может быть обновлено
не может быть переписан
поднимается, но не инициализирован

Ниже приведен простой пример, где мы инициализируем переменную, обновите ее значение и попытайтесь повторно объявить его.

console.log(a); //   ReferenceError: a is not defined

let a = 10;console.log(a); // 10

a = 20;console.log(a); // 20

let a = 30; // SyntaxError: Identifier 'a' has already been declared

Обновление Пусть Переменная допускается. Однако, если вы попытаетесь повторно объявить его, вы столкнулись с SyntaxError Отказ Это защищает разработчики от тихого и случайного повторной декларации переменных.

Являются Пусть Переменные подняты?

Это сложный вопрос. Интернет разделен на это: есть аргументы для обеих сторон. Некоторые разработчики считают, что Пусть (и const ) Переменные не поднимаются, потому что они не могут быть доступен до достижения их заявления о декларации, в отличие от var Отказ Однако этот ответ действительно зависит от вашего определения подъема. Если подъемное подъемное соединение является муфтой декларации и фазы инициализации переменной в верхней части его соответствующей области, то Пусть и Const Переменные не поднимаются.

Однако, прочитав несколько мнений и не быть ближе к истине, я решил пойти с определением подъема MDN.

Согласно этому определению, ответ на наш вопрос – да. Пусть Переменные поднимаются, но они не инициализируются с undefined Отказ Таким образом, они существуют за период времени, называемого «временной мертвой зоной» от начала блока до тех пор, пока их определение не будет оценено. Пытаясь получить доступ к ним в TDZ бросает Собственный ресурс Как видно в примере.

Ниже приведен пример, который показывает блоки сферы Пусть Отказ

function outerFunc() {  let a = 10;  if (a > 5) {    let a = 20;    console.log(a); // 20  }  console.log(a); // 10}

Первая декларация переменных А находится в объеме SwitchFunc Отказ Если Блок создает новый объем, и когда мы делаем вторую декларацию переменной А , он зарегистрирован в новом объеме. Это не зависит от SwitchFunc сфера. Следовательно, отдельная переменная А создается, и мы можем наблюдать, что изменения в внутренней переменной А Не влияйте на внешнюю переменную А Отказ

Это позволяет разработчикам легко создавать временные переменные внутри условиях и петлевых блоках, без необходимости поиска, если переменная уже существует в функции.

конститут

Блок слез
Связывание неизмерена (но значение может или не может быть изменено)
не может быть переписан
поднимается, но не инициализирован

Ниже приведен простой пример, где мы инициализируем переменную, попробуйте обновить его значение и попытаться повторно объявить его.

console.log(a); //  ReferenceError: a is not defined

const a = 10;console.log(a); // 10

a = 20; // TypeError: Assignment to constant variable.

const a = 30; // SyntaxError: Identifier 'a' has already been declared

const b; // SyntaxError: Missing initializer in const declaration

Похоже на Пусть Переменные, Const Переменные поднимаются, но не инициализированы undefined Отказ Пытаясь получить доступ к ним во временной мертвой зоне бросает Собственный ресурс Отказ

Если мы попытаемся инициализировать Const Переменная без назначения, как в примере выше для const b; мы столкнулись с SyntaxError: отсутствует инициализатор в Const Delation Отказ Точно так же мы не можем повторно заявить Const Переменные. Это приводит к SyntaxError Отказ

Давайте временно удержим нашу обсуждение обновления Const Переменные.

Ниже приведен пример масштаба уровня блока Const Переменные:

function outerFunc() {  const a = 10;  if (a > 5) {    const a = 20;    console.log(a); // 20  }  console.log(a); // 10}

Вышеуказанное поведение похоже на Пусть Переменные, где создан новый объем Если Блок, и, следовательно, изменения в внутренней переменной А Не влияйте на внешнюю переменную А Отказ

Вернемся к обсуждению обновления Const Переменные.

Есть общее недоразумение, что Const Переменные удерживают постоянные значения и не могут быть обновлены. Тем не менее, Const работает по-другому.

После первоначального назначения Привязка Const Переменные это неизменный , И, следовательно, Ссылка к тому, что хранится внутри Const Переменная не может быть изменена. В простейших терминах это означает, что вы не можете иметь заявление с просто Const Переменная на левой стороне, а затем равный знак = и новое значение на правой стороне.

Однако, может ли значение можно обновить, зависит от того, что хранится в нем. Давайте рассмотрим два случая:

Примитивный тип данных: логический, нулевой, неопределенный, номер, строка, символ
Объекты

Если переменная назначается примитивный тип данных, тип данных пропускается ценность Отказ Следовательно, если у нас есть заявление Пусть мы можем визуализировать х содержащий номер 10 Отказ

Если переменная назначается объект, объект передается Ссылка Отказ Следовательно, если у нас есть заявление Пусть x = [1,2,3] , х не содержит массив [1,2,3] Отказ Вместо этого он содержит ссылку (адрес) от того, где массив [1,2,3] хранится в памяти после его создания. Следовательно, мы можем визуализировать х содержащий адрес, такой как 5274621 Отказ

Давайте посмотрим примеры из примитивных и объектных типов данных:

// Booleanconst a = true;a = false; // TypeError: Assignment to constant variable.

// Nullconst b = null;b = 10; // TypeError: Assignment to constant variable.

// Undefinedconst c = undefined;c = 10; // TypeError: Assignment to constant variable.

// Numberconst d = 50;d = 100; // TypeError: Assignment to constant variable.

// Stringconst e = 'hello';e = 'world'; // TypeError: Assignment to constant variable.

// Symbolconst f = Symbol('foo');f = 100; // TypeError: Assignment to constant variable.

Как мы можем видеть выше, пытаясь обновить значение любого примитивного типа данных результатов в Типеррор Отказ

/* Arrays are stored by reference.Hence, although the binding is immutable, the values are not. */

const c = [1,2,3];

c.push(10); // No errorconsole.log(c); // [1,2,3,10]

c.pop(); // No errorconsole.log(c); // [1,2,3]

c = [4,5,6]; // TypeError: Assignment to constant variable.

Как мы видим выше, мы можем выталкивать и поп-элементы из массива, поскольку это только изменяет содержимое того, что Const Переменная указывает на, но не пытается перезаписать содержимое Const переменная сама. Однако, если мы попытаемся обновить привязку Const Переменная, повторно присваивая его совершенно новый массив C = [4,5,6] , это бросает Типеррор Отказ

/* Objects are stored by reference.Hence, although the binding is immutable, the values are not. */

const d = { name: 'John Doe', age: 35};

d.age = 40; // Modifying a property: No errorconsole.log(d); // { name: 'John Doe', age: 40};

d.zipCode = '52534'; // Adding a property: No errorconsole.log(d); // { age: 40, name: "John Doe", zipCode: '52534; }

d = { name: 'Mary Jane', age: 25}; // TypeError: Assignment to constant variable.

Как мы видим выше, мы можем изменить и добавлять свойства на объект, так как это только изменяет содержимое того, что Const Переменная указывает на, но не пытается перезаписать содержимое Const переменная сама. Однако, если мы попытаемся обновить привязку Const переменная, повторно присваивая его совершенно новый объект D = {Название: «Мэри Джейн», Возраст: 25}; , это бросает Типеррор Отказ

Когда я должен использовать что?

JavaScript теперь имеет три вида переменных, а естественный вопрос задается вопросом, когда использовать то, что.

После введения блока-населевания Пусть Использование var Как правило, не обескуражен, чтобы избежать путаницы с областью спецификации функций, случайных повторных объявлений и подъемных ошибок с undefined значение. Если у вас нет убедительных причин использования функции Case of var , используйте Пусть Отказ

Использовать Const Удерживать значения, которые являются фактами, такие как Const.14 или ценности, которые должны строго оставаться неизмененными для всего выполнения программы.

Общий подход программирования состоит из разработчиков, начинающих, объявляя все переменные с Const и постепенно преобразование их в Пусть Переменные, если возникает необходимость. Лично я начинаю с Пусть Переменные и преобразуют их в Const Переменные, если я вижу необходимость. Нет набора подхода, и вы должны использовать то, что лучше всего работает для вашего кода.

Если у вас есть время, я настоятельно рекомендую вам снова прочитать вымышленный кусок, так как он будет цементировать связи в вашем уме дополнительными техническими знаниями.

Спасибо за чтение! Я надеюсь, что вы узнали что-то новое, и я хотел бы получить обратную связь.

Следуй за мной в Twitter здесь и LinkedIn здесь Отказ

Рекомендации: