> Как создаются переменные в 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 Zoneconsole.log(z); // ReferenceErrorlet 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)
> Похожие задачи по frontend
Как управлять очередностью загрузки и выполнения скриптов в JavaScript
В чем разница между async function и обычной функцией в JavaScript?
Как отправить состояние при закрытии страницы браузера?
Как в SSR составляется состояние для рендера?
> ГОТОВЫ К СЛЕДУЮЩЕМУ СОБЕСЕДОВАНИЮ?
Запустите тренировочную сессию с ИИ и получите детальную обратную связь, чтобы увереннее проходить реальные интервью