Переменные JavaScript

Введение

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

В этом руководстве рассматривается всё необходимое для уверенного объявления переменных: три ключевых слова (let, const и устаревшее var), как область видимости определяет, где переменная доступна, что такое подъём и Временная мёртвая зона (TDZ) на практике, разница между переприсваиванием и мутацией const, а также правила именования и соглашения, принятые сообществом.

Кратко: используйте const по умолчанию, let когда нужно переприсвоение, и избегайте var в современном коде.

Объявление переменной

Переменная объявляется с помощью ключевого слова, за которым следует имя, и опционально присваивается значение через =:

JavaScript — динамически типизированный язык: переменная не имеет фиксированного типа, поэтому одна и та же переменная может содержать string сейчас и число позже. (См. Типы данных JavaScript для ознакомления со значениями, которые могут хранить переменные.)

Существуют три ключевых слова для объявления:

• const — для значений, которые не будут переприсвоены (ваш выбор по умолчанию).
• let — для значений, которые будут переприсваиваться.
• var — исходное ключевое слово, сохранённое для обратной совместимости. См. Устаревший "var".

Сравнение let, const и var

Пример ниже демонстрирует практические различия между блочно-областными let/const и функционально-областным var:

Область видимости: где живёт переменная

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

Блочная область видимости (let и const)

let и const видны только внутри блока { ... }, где они объявлены — в if, цикле или любой паре фигурных скобок:

Именно поэтому let — правильный выбор для счётчиков циклов: каждая итерация цикла for получает собственную привязку.

Функциональная область видимости (var)

var игнорирует блоки. Её область видимости — ближайшая охватывающая функция (или глобальная область, если переменная объявлена вне функции), что является распространённым источником ошибок:

Глобальная область видимости

Переменная, объявленная вне любой функции, является глобальной и доступна повсюду. В браузерах var на верхнем уровне прикрепляется к глобальному объекту window, тогда как let и const на верхнем уровне ограничены областью видимости скрипта и к window не прикрепляются:

Подъём и Временная мёртвая зона

Подъём (hoisting) означает, что объявления обрабатываются до выполнения кода. Три ключевых слова ведут себя по-разному при подъёме.

Объявление var поднимается и инициализируется значением undefined, поэтому чтение переменной до строки с присваиванием вернёт undefined, а не ошибку:

let и const тоже поднимаются, но не инициализируются. С начала блока и до строки объявления переменная находится в Временной мёртвой зоне (TDZ) — обращение к ней вызывает ReferenceError:

TDZ — это особенность, а не причуда: она выявляет случайное использование переменной до объявления, которое var молча скрывает.

const: переприсвоение и мутация

const запрещает переприсвоение переменной — нельзя направить имя на новое значение. Однако само значение не становится неизменным. object и array, хранящиеся в const, по-прежнему можно изменять:

Используйте const для object и array всякий раз, когда не переприсваиваете привязку — это документирует намерение и предотвращает целый класс ошибок. Если вам действительно нужен неизменяемый object, используйте Object.freeze().

Правила и соглашения об именовании

JavaScript устанавливает несколько жёстких правил для имён переменных:

• Имена могут содержать буквы, цифры, _ (подчёркивание) и $ (знак доллара).
• Имена не должны начинаться с цифры.
• Имена чувствительны к регистру — total и Total — разные переменные.
• Зарезервированные ключевые слова такие как let, class или return использовать нельзя.
• Пробелы не допускаются.

Помимо правил, следуйте этим соглашениям для читаемого кода:

• Используйте описательные имена: userAge, а не x.
• Используйте camelCase для переменных и функций: firstName, itemCount.
• Используйте UPPER_SNAKE_CASE для фиксированных констант: const MAX_SIZE = 100;.
• Избегайте однобуквенных имён, кроме краткосрочных счётчиков циклов (i, j).

Итоги

• Используйте const по умолчанию, let когда нужно переприсвоение, и избегайте var в новом коде.
• let и const имеют блочную область видимости; var имеет функциональную область видимости и вытекает за пределы блоков.
• let/const находятся в TDZ до своего объявления; var читается как undefined.
• const запрещает переприсвоение, но не мутацию — содержимое object и array по-прежнему можно изменять.
• Соблюдайте правила именования (нет ведущей цифры, нет ключевых слов, чувствительность к регистру) и используйте camelCase.

Для более глубокого изучения прочитайте Устаревший "var" и Область видимости переменной, замыкания.

Практика