Что такое область видимости переменных let, const, var

Вопрос

Что такое область видимости переменных let, const, var

Профессия

Frontend Developer

Что хочет услышать интервьюер

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

Ключевые тезисы

• Область видимости определяет, где переменная доступна в коде.
• var имеет функциональную область видимости — переменная доступна в пределах функции.
• let и const имеют блочную область видимости — переменные доступны только внутри блока (например, внутри {}).
• var позволяет повторно объявлять переменные, let и const — нет.
• const требует инициализации при объявлении и не позволяет изменять значение после этого.
• Переменные, объявленные с var, поднимаются (hoisting), но инициализируются как undefined.
• let и const также поднимаются, но остаются в «временной мертвой зоне» до объявления.

Подробный ответ

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

Hoisting (поднятие) — это механизм, при котором объявления переменных и функций перемещаются в верхнюю часть своей области видимости перед выполнением кода. Переменные, объявленные через var, поднимаются и инициализируются как undefined, что может привести к неожиданным ошибкам. В отличие от них, let и const также поднимаются, но остаются в «временной мертвой зоне» (TDZ) до момента их объявления. Попытка обратиться к переменной в TDZ вызовет ошибку ReferenceError.

Еще одно важное отличие — возможность повторного объявления. var позволяет объявлять переменную с тем же именем несколько раз, что может привести к конфликтам и ошибкам. let и const такого не допускают. Кроме того, const требует инициализации при объявлении и не позволяет изменять значение после этого. Однако, если const ссылается на объект или массив, их внутреннее состояние можно изменять, так как const фиксирует только ссылку, а не содержимое.

Практические примеры

Пример 1

Разница между var и let в цикле for

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Выведет 3, 3, 3
}

for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 100); // Выведет 0, 1, 2
}

В первом случае var создает одну переменную i на всю функцию, а во втором let создает новую переменную j для каждой итерации цикла.

Пример 2

Изменение объекта, объявленного через const

const user = { name: 'Alice' };
user.name = 'Bob'; // Можно, так как изменяется свойство объекта, а не сама переменная
console.log(user.name); // 'Bob'

user = { name: 'Charlie' }; // Ошибка: нельзя переопределить const

Пример 3

Временная мертвая зона (TDZ)

console.log(a); // undefined (var поднята)
var a = 10;

console.log(b); // Ошибка: Cannot access 'b' before initialization
let b = 20;

Частые ошибки

• Использование var вместо let/const, что может привести к неожиданным побочным эффектам из-за функциональной области видимости и hoisting.
• Попытка изменить значение const, что вызывает ошибку, если переменная не является объектом или массивом.
• Непонимание TDZ для let и const, приводящее к ошибкам при попытке доступа к переменной до её объявления.

Связанные темы

• Hoisting в JavaScript
• Замыкания (closures)
• Стрелочные функции и их область видимости
• Модули ES6 и их влияние на область видимости

Follow-up вопросы

Что такое временная мертвая зона (TDZ) и как она связана с let и const?

Уровень: intermediate

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

Можно ли изменить значение переменной, объявленной через const, если это объект или массив?

Уровень: basic

Да, можно изменять свойства объекта или элементы массива, объявленных через const, так как const запрещает только переприсваивание самой переменной. Однако нельзя присвоить переменной новый объект или массив.

Как var, let и const ведут себя в циклах (например, for, for...of)?

Уровень: intermediate

var в циклах имеет функциональную область видимости, поэтому переменная будет одна на все итерации. let и const имеют блочную область видимости, создавая новую переменную для каждой итерации, что полезно для замыканий и асинхронных операций внутри цикла.

Почему var считается устаревшим и какие проблемы он может вызывать?

Уровень: advanced

var считается устаревшим из-за функциональной области видимости, поднятия (hoisting) и возможности повторного объявления, что может приводить к неочевидным ошибкам. Например, переменные var «просачиваются» за пределы блоков (if, for), а их hoisting может затруднять чтение кода.

Как hoisting влияет на объявление функций и переменных var, let, const?

Уровень: intermediate

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