Источник: Nuances of Programming
Пока я разбирался что к чему в основах JavaScript, я наткнулся на три способа объявления переменных, а именно var, let и const. В данной статье я попытаюсь обобщить различия этих операторов присваивания.
Чтобы по-настоящему понять разницу между var, let и const, нам необходимо разобраться в следующих понятиях:
- Объявление переменной;
- Инициализация переменной;
- Область видимости;
- Механизм hoisting («поднятие»).
Объявление переменной
Объявление переменной — это процесс введения нового определения в программу или, если быть точнее, в область видимости. В JavaScript переменные изначально приобретают значение undefined, когда мы объявляем ключевое слово var (это автоматически выполняется интерпретатором).
var foo; // объявление переменной
console.log(foo); // logs →undefined
Инициализация переменной
Инициализация переменной — это процесс присваивания значения переменной. Поэтому, когда мы определяем связь между ключевым словом var, интерпретатор присваивает значение undefined.
Область видимости
Область видимости переменной определяет контекст, в котором доступны переменные и функции, на которые можно ссылаться в программе. Область видимости определяет видимость и время жизни переменных и параметров. Если переменной нет в определенной области видимости, то она недоступна для использования. Области видимости также могут располагаться в иерархическом порядке, чтобы дочерние имели доступ к родительским, а не наоборот.
Существует 2 типа области видимости:
- Функциональная область видимости;
- Блочная область видимости.
Функциональная область видимости
Переменные, объявленные внутри функции, входят в область видимости этой функции, а также в область видимости вложенных в нее функций, независимо от блоков.
Блочная область видимости
Переменные, объявленные внутри блока, входят в область видимости только этого блока, а также вложенных в него блоков, но не за пределами блока, даже если это все одна функция. В блоки входят if…else и циклы.
Поднятие
В веб-документации MDN говорится:
«Поднятие — это термин, использование которого вы не найдете ни в одной нормативной документации JavaScript до спецификации языка ES2015. Предполагалось, что поднятие — это обобщенный способ видения того, как работает контекст исполнения (особенно создание и исполнение стадий) в JavaScript. Однако это понятие по началу может сбивать с толку.
Концептуально, например, строгое определение поднятия предполагает, что объявление переменной и функции физически располагается в начале кода, но это не так. Объявления переменной и функции помещаются в память на стадии компиляции, но остаются там, где вы их набрали в своем коде».
var
Идентификатор var объявляет переменную, опционально присваивая ей значение. Любая переменная, объявленная идентификатором var, имеет функциональную область видимости и идентифицирует объявленные переменные с помощью ключевого слова var. Такие переменные поднятые, а их первоначальное значение — undefined.
console.log(foo); //logs →undefined
var foo;
//код выше не приводит к ошибке из-за поднятия;
let
Идентификатор let объявляет локальную переменную. Любая переменная, объявленная с помощью let, имеет блочную область видимости. Значения подняты и не инициализированы.
let foo;
console.log(foo); // Uncaught Reference Error: l is not defined
// код выше приводит к ошибке, потому что значение переменной не инициализировано;
Связи let создаются сверху области видимости конкретного блока, содержащего определение, часто называемого поднятием. В отличие от переменных, объявленных с помощью var, которые начинаются со значения undefined, переменные let не инициализируются, пока им не присвоится значение. Обращение к переменной до инициализации вызовет Reference Error (ошибка использования несуществующего названия).
const
Идентификатор const объявляет переменную, почти как let, но у него появляется еще одно свойство. Он не может быть переопределен, то есть после инициализации связей const не может присвоить никакое другое значение.
Следовательно, const должен быть всегда инициализирован при объявлении, иначе возникает ошибка.
const foo = “something”;
foo = “other thing”; // Uncaught TypeError: Assignment to constant variable.
const bar; //Uncaught SyntaxError: Missing initializer in const declaration
Стоит отметить, что когда const связан с объектом, сам объект нельзя изменить, и const будет указывать на тот же самый объект. Однако изменения внутри объекта допустимы.
const score = {visitors: 0, home: 0};
score.visitors = 1; // Можно
score = {visitors: 1, home: 1}; // Uncaught TypeError: Assignment to constant variable.
// Нельзя
Один последний факт:
Переменные, объявленные внутри функции без ключевого слова, станут глобальными переменными. Взглянем на это в следующем примере:
function funFact() {
isGloballyAvailable = true;
}
funFact();
console.log(isGloballyAvailable); // записывает true
Чтобы понять что происходит, нам нужно вернуться назад к понятию поднятия. Обычно при инициализации переменной в нашем коде интерпретатор ищет «поднятые переменные» и затем присваивает или переназначает значение переменной. Однако, когда интерпретатор не может найти переменную внутри функции, он ищет ее среди переменных родительской функции, пока не дойдет до глобальной области видимости.
В нашем случае интерпретатор не найдет ‘isGloballyAvailable’ даже в глобальной области видимости, поэтому он автоматически туда ее добавит.
Это невероятно опасный процесс, которого лучше не допускать. Поэтому имейте в виду, что объявлять переменные без ключевых слов var, let и const нельзя.
Так, когда использовать var, let или const?
ES2015(ES6) представил let и const. Зачем JavaScript разработчикам их вводить? Может, чтобы исправить проблемы, возникающие с var, или для улучшения читабельность кода?
Одна главная проблема с var связана с тем, что он позволяет переназначать переменные в коде, из-за чего не выбрасываются ошибки. Это приводит к различным побочным эффектам в коде.
Распространенное мнение, которое сходится с моим:
Всегда отдавайте предпочтение const, если значение, присвоенное переменной, не изменится. Это подскажет будущим разработчикам, что у переменной неизменное значение.
А let используйте, если значение в будущем изменится.
Где бы был полезен var, я не представляю.
Читайте также:
Читайте нас в телеграмме и vk
Перевод статьи Gemhar Rafi — var, let and const in JavaScript Decoded…
