Темы:

  • Декларация и инициализация
  • Повторное декларирование и переназначение
  • Подъем
  • Сферы

Введение

До ES6 (ECMAScript 6) было только одно ключевое слово для объявлений переменных — var и два типа области видимости: global и function. область. Однако в 2015 году все изменилось, потому что в ES6 появились два новых ключевых слова: let и const, а также еще один тип области: блочная область. Хотите знать, почему эти вещи были введены в ECMAScript 6 и чем они отличаются? Так что оставайтесь здесь и давайте поговорим об этом.

Проблемы с переменной

Когда var был единственным способом объявления переменных в JavaScript, иногда вы могли столкнуться с ошибками, вызванными областью действия переменной, поскольку ключевое слово var не является безопасным для области видимости. Посмотрим, как это работает.

В данном случае переменная play объявляется дважды, но на консоли выводится значение «не игра», потому что varsможно переназначить. В настоящее время использование var не рекомендуется, так как оно имеет функциональную область. Пример ниже объяснит это лучше.

Внутри запуска функции вы можете получить доступ к переменной play, но если вы попытаетесь получить доступ к этой переменной вне функции запуска, вы получите ошибку ссылки. Это происходит потому, что переменная play была объявлена ​​внутри функции, поэтому ее область видимости не глобальна, а функциональна.

Инициализация

В этом примере группа переменных сначала объявляется, а затем инициализируется. Но можно сделать это одновременно. Смотреть:

Подъем

Хорошо, позвольте мне рассказать вам о подъеме в JavaScript. Он перемещает переменные и объявления функций в начало их области действия перед выполнением кода. Я дам вам код, который мы видим в IDE, и «скрытый» код. Если вы попытаетесь получить доступ к переменной до ее инициализации, вы получите undefined.

Напечатано «undefined», потому что Hoisting делает это:

Как я уже говорил ранее, механизм Hoisting перемещает объявление var в верхнюю часть своей области видимости, но не перемещает инициализацию, поэтому вы получаете «undefined». Ниже вы можете увидеть еще один пример подъема, но на этот раз с функцией.

Let и const

Letиconst, впервые представленные в 2015 году, работают аналогично var, но letи const не позволяют повторно объявлять переменную. Если вы попытаетесь повторно объявить его, вы получите SyntaxError. Видеть:

И пусть переназначение работает нормально:

Let и Const имеют блочную область действия (что-то вроде открывающих и закрывающих фигурных скобок, например {}), а var имеет глобальную и функциональную область действия. Если вы не знаете, что такое глобальная область видимости, это в основном означает, что вы можете получить доступ к переменной везде в вашей программе, если вы объявили переменную вне блоков.

Как вы можете видеть в приведенном выше коде, переменная house доступна только внутри этого блока, потому что она была объявлена ​​там, поэтому вне его вы получаете ReferenceError. Но если вы объявите глобально и присвоите значение переменной внутри блока, это значение останется. Вот что я имел в виду:

Что насчет подъема? К сожалению или к счастью, let и const не имеют этого механизма, а var есть. Вместо того, чтобы возвращать «undefined» на консоль в качестве подъема var, let и const возвращают ReferenceError, как показано ниже.

Разрешить подъем:

Постоянное поднятие:

Ключевое слово const нельзя повторно объявить или переназначить. Если вы попытаетесь повторно объявить константную переменную, вы получите SyntaxError.

И переназначение дает вам TypeError.

Это происходит потому, что const работает таким образом: вы должны объявить и инициализировать его одновременно. Вот как это работает. Если его не инициализировать, вы получите SyntaxError.

Но помните, const не является неизменным. Объект, назначенный переменной const, может изменить свое значение, вы можете добавить к нему свойства…

Согласно W3Schools, константа не определяет постоянное значение. Он определяет постоянную ссылку на значение. Помня о предыдущем примере, вы можете изменить значение свойства, добавить другие свойства, но вы не можете изменить ссылку на объект, поскольку это вызывает TypeError.

Заключение

Давайте соберем все темы, которые мы рассмотрели сегодня. Взгляните на таблицу ниже:

Вот оно! В этой статье вы узнали о различиях между var, let и const, типах области действия и механизме подъема. Если у вас есть какие-либо вопросы, свяжитесь со мной, и я постараюсь вам помочь 😁

До скорой встречи!