> Как создаются переменные в JavaScript? (JavaScript)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: IT-One

Стек: JavaScript

> Пример ответа

Короткий ответ

Переменные в JavaScript создаются с помощью ключевых слов var, let или const. Основное различие - в области видимости (scope), возможности переопределения и hoisting. var имеет функциональную область видимости, let и const - блочную. const запрещает переприсваивание, но не делает объект иммутабельным. Все три ключевых слова подвержены hoisting, но let и const не инициализируются до объявления (Temporal Dead Zone).

Подробное объяснение

Создание переменной состоит из двух этапов: объявление (declaration) и инициализация (initialization). При использовании var переменная всплывает (hoisting) в начало функции или глобального контекста и инициализируется значением undefined. let и const также всплывают, но находятся в Temporal Dead Zone до момента фактического объявления - обращение к ним до строки с let/const выбрасывает ReferenceError.

var игнорирует блочные конструкции (if, for), создавая переменную в ближайшей функции. let и const ограничены блоком {}. const требует обязательной инициализации при объявлении и запрещает повторное присваивание, но для объектов и массивов это не означает иммутабельность - можно изменять их свойства.

В современном JavaScript (ES6+) рекомендуется использовать const по умолчанию, let - когда нужно переприсваивание, var - только для legacy-кода или специфических случаев (например, глобальные переменные в браузере).

На практике

Выбор между let и const - это вопрос семантики и защиты от случайного переопределения. В реальных проектах const используется для 90% переменных: ссылки на DOM-элементы, конфигурации, импорты, функции. let применяется для счетчиков циклов, аккумуляторов и переменных, чье значение меняется в процессе выполнения.

var может быть полезен в старом коде или при работе с глобальным объектом window в браузере, но в современной разработке его избегают из-за неочевидного поведения с областью видимости и hoisting.

Важно помнить про Temporal Dead Zone: даже если переменная объявлена позже, обращение к ней до объявления приведет к ошибке, в отличие от var.

Пример кода

JAVASCRIPT
// var - функциональная область видимости
function exampleVar() {
if (true) {
var x = 10;
}
console.log(x); // 10 - x доступен вне блока
}
// let - блочная область видимости
function exampleLet() {
if (true) {
let y = 20;
}
console.log(y); // ReferenceError: y is not defined
}
// const - обязательная инициализация, запрет переприсваивания
const obj = { a: 1 };
obj.a = 2; // Работает - свойство изменяемо
// obj = {}; // TypeError: Assignment to constant variable
// Temporal Dead Zone
console.log(z); // ReferenceError
let z = 5;

Как отвечать на собеседовании

Начни с ключевых слов, затем объясни разницу в области видимости и hoisting. Упомяни Temporal Dead Zone как важное отличие let/const от var. Приведи примеры из практики: когда используешь const, а когда let. Покажи понимание, что const не делает данные неизменяемыми - для этого нужен Object.freeze или библиотеки вроде Immutable.js.

Избегай поверхностного ответа вроде "var - старый, let и const - новые". Покажи, что понимаешь внутренние механизмы: hoisting, scope chain, TDZ.

Что проверяет интервьюер

Интервьюер оценивает:

  • понимание разницы между объявлением и инициализацией
  • знание областей видимости (functional vs block scope)
  • осведомленность о Temporal Dead Zone
  • умение выбирать правильное ключевое слово под задачу
  • способность объяснить, почему const не гарантирует иммутабельность

Это базовый вопрос, но для senior важно показать глубину: как hoisting влияет на выполнение кода, как работает scope chain, какие могут быть баги при использовании var в циклах.

Типичные ошибки

  • утверждение, что let и const не подвержены hoisting (на самом деле подвержены, но с TDZ)
  • путаница между const и иммутабельностью - думают, что объект нельзя изменить
  • использование var в современных проектах без веской причины
  • забывание про обязательную инициализацию const - const a; вызовет SyntaxError
  • непонимание, что let в цикле создает новую переменную на каждой итерации (замыкание работает корректно, в отличие от var)

> ГОТОВЫ К СЛЕДУЮЩЕМУ СОБЕСЕДОВАНИЮ?

Запустите тренировочную сессию с ИИ и получите детальную обратную связь, чтобы увереннее проходить реальные интервью