Прежде всего, давайте определим, что такое переменная. Проще говоря, переменная — это то, что хранит значение. Она имеет идентификатор (или имя), который может содержать буквы, цифры и специальные символы. Для того чтобы «объявить» переменную, мы можем использовать три метода: let, var и const.
Как правило, если вы не хотите, чтобы значение вашей переменной менялось на протяжении всего кода, объявляйте ее с помощью const (значение будет оставаться постоянным, понятно?). Это гарантирует, что она не может быть повторно объявлена и не может быть переназначена. Давайте посмотрим на это в действии:
const snack = "ice-cream"
Здесь мы объявили нашу переменную (snack) и присвоили ей значение (ice-cream). Если мы хотим получить значение нашей переменной, мы можем просто выполнить команду snack и получить в ответ ice-cream:
Что произойдет, если мы попытаемся повторно присвоить значение? Давайте посмотрим:
Хмммм, это не нравится. Может быть, мы можем просто повторно объявить значение?
Нет, это тоже не работает!
Что, если мы хотим немного больше гибкости и хотим иметь возможность переназначать значение переменной? Здесь мы воспользуемся переменной let:
Заметьте, мы все равно не сможем повторно объявить значение let, но мы можем его переназначить. В той же ситуации const выдает ошибку.
И самый гибкий из всех, var, может быть как повторно объявлен, так и повторно присвоить свое значение:
Итак, подведем итог: переменным var можно присваивать значение и повторно объявлять; переменным let можно присваивать значение, но не повторно объявлять; переменным const нельзя ни повторно присваивать значение, ни повторно объявлять.
Но это не единственные различия; они также различаются по области видимости, или, по сути, по их доступности для использования в различных частях кода. Здесь мы рассмотрим два типа области видимости: глобальную и локальную.
Если переменная объявлена вне какой-либо функции, то это глобальная переменная. К глобальным переменным можно обращаться из любой функции:
Переменные, объявленные внутри любой функции, называются локальными переменными. К локальным переменным нельзя обращаться за пределами функции:
Важно отметить, что в JavaScript переменная может использоваться и без объявления, то есть мы не будем использовать var, let или const для ее объявления. Если переменная используется без объявления, она автоматически становится глобальной переменной:
Мы также должны упомянуть о том, что называется областью видимости блока. Блок — это, вообще говоря, все, что заключено в фигурные скобки; это могут быть циклы for или while, оператор if и т.д. Блочная область видимости означает объявление переменной внутри этих фигурных скобок. Именно в рамках концепции блочной области видится разное поведение наших трех переменных.
Когда речь идет о переменной var, она глобально масштабируется, если мы объявляем ее вне функции, и локально (или функционально) масштабируется, если мы объявляем ее внутри функции. Она не является блочной! Это означает, что если мы объявляем переменную с помощью var внутри блока кода, мы можем так же легко получить к ней доступ вне этого блока кода, на уровне функции:
Как мы видим, у нас нет проблем с распечаткой значения переменной «snack» (которая была определена внутри блока кода) как внутри блока, так и за его пределами. Это, а также тот факт, что мы можем как повторно присваивать, так и повторно объявлять ее значение, потенциально может создать сложности и ошибки в нашем коде, поэтому const и let обычно предпочтительнее var.
Видите ли, в отличие от var, и const, и let фактически уважают область видимости блока; если мы объявим переменную с помощью этих двух переменных внутри блока кода, мы не сможем получить к ней доступ за пределами фигурных скобок, ни на уровне функции, ни на глобальном уровне. Это может открыть гораздо больше возможностей для нашего кода! Давайте посмотрим, как ведет себя const в той же самой ситуации, которую мы только что рассмотрели выше:
Как мы видим, сработал только console.log внутри блока кода. Аналогичное поведение мы можем наблюдать и с let:
Подводя итог, можно сказать, что основные различия в области видимости: переменные let и const являются блочными, а переменные var — нет (только глобально или функционально). Эти различия, а также различия в их способности быть повторно объявленными и переназначенными, открывают совершенно разные возможности для каждой из этих переменных при написании кода.
Спасибо за прочтение!
