В чем разница между var, let и const

Разбор вопроса «В чем разница между var, let и const» для Frontend Developer: что проверяет интервьюер, ключевые тезисы, практические примеры и частые ошибки.

Интервьюер хочет убедиться, что кандидат понимает различия в области видимости, возможности повторного объявления и изменения значений, а также знает о всплытии и «временной мёртвой зоне». Важно показать осознанный выбор между let и const в современных проектах.

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

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

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

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

Еще одно важное отличие — поведение при всплытии. Все три типа переменных всплывают, но var инициализируется как undefined, тогда как let и const остаются в «временной мёртвой зоне» (Temporal Dead Zone) до момента их объявления. Это означает, что попытка обратиться к let или const до их объявления вызовет ошибку ReferenceError, в то время как var просто вернет undefined.

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

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

Пример 1

Пример с var:

function exampleVar() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 10, так как var имеет функциональную область видимости
}

Пример 2

Пример с let и const:

function exampleLetConst() {
  if (true) {
    let y = 20;
    const z = 30;
    console.log(y, z); // 20, 30
  }
  console.log(y); // ReferenceError: y is not defined
  console.log(z); // ReferenceError: z is not defined
}

Пример 3

Пример с изменением const-объекта:

const person = { name: 'Alice' };
person.name = 'Bob'; // Допустимо, так как изменяется свойство объекта
console.log(person); // { name: 'Bob' }
person = { name: 'Charlie' }; // TypeError: Assignment to constant variable.

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

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

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

Область видимости в JavaScript
Всплытие (hoisting)
Временная мёртвая зона (Temporal Dead Zone)
Иммутабельность в JavaScript

Follow-up вопросы

Что такое всплытие (hoisting) и как оно работает с var, let и const?

Уровень: intermediate

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

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

Уровень: basic

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

Какие проблемы могут возникнуть при использовании var в современных проектах?

Уровень: intermediate

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

В каких случаях стоит использовать const вместо let?

Уровень: basic

const стоит использовать, когда значение переменной не должно изменяться после инициализации. Это помогает предотвратить случайные переопределения и делает код более предсказуемым. Например, для констант, ссылок на DOM-элементы или данных, которые не должны меняться.

Что такое «временная мёртвая зона» (Temporal Dead Zone) и как она связана с let и const?

Уровень: advanced

«Временная мёртвая зона» — это период между началом области видимости и моментом объявления переменной. В этот период доступ к переменным, объявленным через let или const, вызывает ошибку. Это предотвращает использование переменных до их инициализации.