Различия между переменными, созданными с использованием let, var или const?

В JavaScript есть три способа создания переменных: let, var и const. Несмотря на то, что их цели одинаковы — хранить значения, — их поведение в коде может сильно различаться. Чтобы избежать ошибок и писать более предсказуемый код, важно понимать эти различия.

1. Область видимости (Scope)

• var: Переменные, объявленные через var, имеют функциональную область видимости. Это означает, что они видны везде внутри функции, в которой были объявлены, независимо от того, находятся ли они внутри условных блоков или циклов. Если переменная объявлена с помощью var вне функции, она становится глобальной.
  Пример:

  function exampleVar() {
    if (true) {
      var x = 5;  // x доступна внутри всей функции
    }
    console.log(x);  // 5
  }
  exampleVar();
  

• let и const: Переменные, объявленные через let и const, имеют блочную область видимости. Это значит, что они доступны только внутри блока, в котором были объявлены (например, внутри if, цикла for и т. д.).
  Пример:

  function exampleLetConst() {
    if (true) {
      let y = 10;  // доступна только внутри блока if
      const z = 20;  // доступна только внутри блока if
    }
    console.log(y); // Ошибка: y не определена
    console.log(z); // Ошибка: z не определена
  }
  exampleLetConst();
  

2. Поднятие переменных (Hoisting)

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

  console.log(a);  // undefined, так как только объявление поднимется, а значение нет
  var a = 10;
  console.log(a);  // 10
  

• let и const: Переменные, объявленные через let и const, также поднимаются, но находятся в временной мертвой зоне (TDZ) до их фактического объявления. Это значит, что доступ к таким переменным до их инициализации приведет к ошибке.
  Пример:

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

3. Изменяемость (Mutability)

• var и let: Переменные, объявленные через var и let, могут быть изменены после их инициализации. Это даёт гибкость, но и возможность случайных ошибок, если значение переменной изменяется в ненадлежащем месте.
  Пример:

  let x = 10;
  x = 20;  // Разрешено
  console.log(x);  // 20
  

• const: Переменные, объявленные с помощью const, не могут быть переопределены. Однако, если const используется для объектов или массивов, содержимое этих объектов можно изменять.
  Пример:

  const y = 30;
  y = 40;  // Ошибка: Assignment to constant variable
  
  const obj = { name: 'John' };
  obj.name = 'Jane';  // Разрешено изменение содержимого объекта
  console.log(obj);  // { name: 'Jane' }
  

4. Глобальный объект

• var: Если переменная объявлена через var в глобальной области видимости (не внутри функции), она становится свойством глобального объекта (window в браузере).
  Пример:

  var a = 10;
  console.log(window.a);  // 10
  

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

  let b = 20;
  console.log(window.b);  // undefined
  
  const c = 30;
  console.log(window.c);  // undefined
  

5. Рекомендации по использованию

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

Заключение

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

Дополнительные ресурсы:

• Документация MDN по let, var, и const