Объявление переменных в JavaScript

Диаграмма: объявление переменных в JavaScript

JavaScript предоставляет три ключевых способа объявлять переменные: var, let и const. var имеет функциональную или глобальную область видимости и допускает повторное объявление; let и const введены в ES6 и дают блочную область видимости, причем const запрещает переопределение ссылки. Используйте const по умолчанию, let — для изменяемых значений, а var — только для совместимости со старым кодом.

Зачем это важно

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

Основной смысл статьи

Дальше подробно разберём отличия между var, let и const, покажем реальные примеры, обсудим правила области видимости, подводные камни (hoisting, временная мёртвая зона), когда и как мигрировать старый код, а также дадим чек-листы и простую методику принятия решений.

Термины в одной строке

Область видимости — часть программы, где переменная доступна.
Блок — код внутри фигурных скобок { }.
Hoisting — механизм поднятия объявлений в начало области видимости.
Временная мёртвая зона — период между входом в блок и моментом фактического объявления let/const.

Три способа объявить переменную

В JavaScript можно объявлять переменные тремя ключевыми словами:

var
let
const

Ниже — подробный разбор каждого варианта.

var

var — исторический способ объявления переменных. Его особенности:

Область видимости: функциональная (если объявлено внутри функции) или глобальная (если вне функции).
Повторное объявление разрешено.
Переменные, объявленные через var, поднимаются (hoisting): объявление становится видимым до выполнения кода, но присвоение остаётся на месте.

Пример простого объявления:

var myVariable = 15;

Пример поведения области видимости:

var test = 5;

function varTest() {
  console.log(test); // 5, берёт глобальную переменную
}

varTest();

Если объявить переменную внутри функции, она будет локальной для этой функции:

var test = 5;

function varTest() {
  var test = 10; // новая переменная, ограничена функцией
  console.log(test); // 10
}

varTest();
console.log(test); // 5 — глобальная переменная не изменилась

Но если внутри одной функции объявить var повторно в разных блоках, то это будет одна и та же переменная (var игнорирует блочную область):

function varTest() {
  var test = 5;
  {
    var test = 10; // перезаписывает test для всей функции
    console.log(test); // 10
  }
  console.log(test); // 10
}

varTest();

Когда использовать var

Только при поддержке очень старых сред (IE9 и ниже) или реставрации древнего кода.
В новых проектах var следует избегать, чтобы не сталкиваться с неожиданным поведением блочной области.

let

let введён в ES6 (ECMAScript 2015). Ключевые свойства:

Блочная область видимости — переменная доступна только внутри ближайших { }.
Повторное объявление в одной области запрещено (ошибка).
Также подвержена hoisting, но в отличие от var, имеет временную мёртвую зону: доступ до объявления ведёт к ReferenceError.

Пример с блоками:

function letTest() {
  let test = 5; // Block A
  {
    let test = 10; // Block B — отдельная переменная
    console.log(test); // 10
  }
  console.log(test); // 5
}

letTest();

Временная мёртвая зона и ReferenceError:

{
  // console.log(x); // ReferenceError: x is not defined (если раскомментировать)
  let x = 1;
}

Когда использовать let

Для переменных, значение которых меняется в ходе выполнения (счётчики, временные значения и т.д.).
Когда нужна блочная область и явное ограничение видимости.

const

const похож на let по области видимости: он блочно-областьный. Главное отличие:

Запрещено переназначение привязанной идентификатора (immutable binding).
Нельзя повторно объявить переменную в одной области.
При объявлении const требуется сразу присвоить значение.

Пример:

const permanent = 10;
// permanent = 20; // TypeError: Assignment to constant variable.

Важно: const гарантирует, что ссылка на значение не изменится. Для объектов и массивов это значит, что вы не можете переназначить переменную на другой объект, но можно изменять содержимое объекта:

const obj = { a: 1 };
obj.a = 2; // это работает
// obj = { a: 2 }; // TypeError

Когда использовать const

По умолчанию объявляйте переменные через const. Это выражает намерение: значение не должно переопределяться.
Если потом выясняется, что требуется изменение, замените const на let.

Hoisting и временная мёртвая зона — наглядно

var: объявление поднимается и инициализируется значением undefined до выполнения кода.
let/const: объявление поднимается, но не инициализируется — доступ до объявления вызывает ReferenceError (временная мёртвая зона).

Примеры:

console.log(a); // undefined
var a = 1;

console.log(b); // ReferenceError
let b = 2;

Практические рекомендации (чек-лист для разработчика)

Всегда начинайте с const.
Если значение должно меняться — используйте let.
Не используйте var в новом коде, если нет крайней необходимости.
Для конфигураций, констант и ссылок используйте const.
Для счётчиков и циклов часто подходит let.

Чек-лист для ревью кода

Найдены ли var в новых файлах? Поменять на let/const.
Не содержат ли переменные широкую область там, где нужна локальность? Сократите область видимости.
const ли используется для неизменяемых привязок?

Когда это даёт сбой или вводит в заблуждение

var может приводить к непредсказуемому поведению при вложенных блоках.
Непонимание временной мёртвой зоны приводит к ReferenceError.
Люди часто путают «неизменяемость ссылки» и «неизменяемость значения» для объектов при использовании const.

Миграция старого кода: пошаговая методика

Найдите все var в проекте (поиск / grep / ESLint).
Для каждой var попытайтесь заменить на const.
Если при замене появляются ошибки реassign, замените на let.
Запустите тесты и линтер.
Рефакторите по небольшим PR, чтобы упрощать ревью.

Мини-плейбук для PR

Один PR — одна цель: замена var → let/const в одном модуле.
Добавьте unit-тесты для ключевой логики.
Обозначьте совместимость с целевыми средами (Node/браузеры).

Быстрая шпаргалка

Ключевое слово	Область видимости	Можно переназначать	Повторное объявление
var	Функция или глобальная	Да	Да
let	Блок	Да	Нет
const	Блок	Нет (ссылка неизменна)	Нет

Стратегия принятия решения (flowchart)

flowchart TD
  A[Нужно объявить переменную?] --> B{Значение будет меняться?}
  B -- Да --> C[Используйте let]
  B -- Нет --> D[Используйте const]
  C --> E[Нужна совместимость с очень старыми браузерами?]
  D --> E
  E -- Да --> F[Рассмотрите транспиляцию или var как крайний случай]
  E -- Нет --> G[Оставить как есть]

Ролевые чек-листы

Для разработчика

Используйте const по умолчанию.
Минимизируйте область видимости.
Покройте изменения тестами.

Для ревьюера

Проверяйте отсутствие var в новом коде.
Убедитесь, что изменение области видимости не влияет на поведение.
Запросите пояснение, если const использован для изменяемого объекта.

Для архитектора

Включите правила ESLint (prefer-const, no-var, block-scoped-var) в конфигурацию проекта.
Определите минимальную целевую среду (ES6+) и политику транспиляции.

Советы по настройке инструментов

Включите правило ESLint: “no-var” — запретить var.
Включите “prefer-const” — предлагает заменять let на const, где это возможно.
Настройте CI, чтобы линтер и тесты проходили до слияния PR.

Краткая таблица совместимости и миграции

ES6 (ECMAScript 2015) поддерживает let и const.
Современные браузеры и Node.js уже поддерживают let/const; для старых браузеров используйте Babel.

Примеры ошибок и способы их обнаружения

ReferenceError из-за временной мёртвой зоны — смотрите стек-трейс и ищите доступ до объявления let/const.
Непредвиденное переопределение переменной — найдите var в файле и проанализируйте область видимости.

Краткая сводка лучших практик

Предпочитайте const; используйте let по необходимости; избегайте var.
Ограничивайте область видимости — пишите менее связный, более модульный код.
Настройте линтеры и CI для автоматической проверки.

1‑строчный глоссарий

Hoisting — поднятие объявлений в начало области видимости.
TDZ — временная мёртвая зона, время до инициализации let/const.
Immutable binding — const фиксирует привязку идентификатора, но не замораживает содержимое объектов.

Краткая проверка перед коммитом

Нет var?
ESLint проходит?
Тесты проходят?
Использованы const/let обоснованно?

К каким материалам двигаться дальше

Изучите взаимодействие JavaScript с DOM и событиями.
Попробуйте собрать практический проект (например, слайдер на JavaScript), чтобы закрепить знания об областях видимости.

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