Ликбез: чем различаются var, let и const в JavaScript

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

Разберёмся, чем они различаются и в каких случаях что нужно использовать.

Var

Ключевое слово var появилось ещё в первых версиях JS, но сейчас от var стараются отойти при написании кода. Почему так, сейчас объясним. 

Обращение

Мы можем объявить переменную при помощи var и обратиться к ней, не присваивая ей значения:

var normal;
console.log(normal);

Значение такой переменной будет undefined. 

Мы также можем обращаться к переменной до её фактического объявления:

console.log(weird);
var weird = "Это поднятие";

Такой код не вызовет ошибки:

Это происходит потому, что переменная var поднимается (hoisting) в текущей области видимости. Переменная уже была объявлена (поднята вверх), но её значение ещё не было присвоено, поэтому выводится undefined.

Область видимости

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

Создадим функцию и внутри неё объявим переменную var:

function example() {
  if (true) {
    var localVar = "Это локальная переменная";
    console.log(localVar); 
  }
  console.log(localVar); 
}
example();

Мы объявили переменную localVar внутри блока if, но при этом она равно доступна внутри функции example, поскольку var не имеет блочной области видимости:

Мы получаем два значения, поскольку здесь также используется механизм поднятия. Через поднятие переменная «всплывает» вверх в пределах текущей области видимости (в нашем примере — до начала функции).

Переменная localVar становится видимой во всей функции, а не только внутри блока if, где была объявлена. 

Переназначение и повторное объявление

Переменную, объявленную с помощью var, можно переназначить в любом месте кода:

var x = 5;
console.log(x);
x = 10; 
console.log(x);

Также var можно заново объявить в текущем блоке. Причём количество объявлений числа может быть любым. Покажем переназначение на практике — переназначим переменную localVar:

function example() {
  if (true) {
    var localVar = "Это локальная переменная";
    var localVar = "Это другое значение переменной";
    console.log(localVar); 
  }
  console.log(localVar);    
}
example();

Повторное объявление переменных считается плохой практикой, но бывают ситуации, когда оно нужно. Например, при работе с динамически загружаемыми модулями и при генерации кода на лету. 

Let

Ключевое слово let — это улучшенная версия var. Оно было представлено в ES6 в 2015 году. 

Обращение

Так же как и с var, мы можем просто объявить переменную let, не присвоив ей значение — это не вызовет ошибку:

let y
console.log(y)

Мы получим значение undefined.

Но в отличие от var, где используется механизм «поднятия», к переменной let нельзя обращаться до момента объявления:

console.log(a)
var a = 5

console.log(с)
let c = 6

И если в случае var мы получили undefined, то у let появилась ошибка: переменная не определена.

Область видимости

Переменные, объявленные с помощью let, могут иметь глобальную, локальную или блочную область видимости. 

Основное отличие let — оно работает только в той области видимости, где объявлена.

Возьмём наш предыдущий пример и поменяем var на let:

function example() {
  if (true) {
    let localVar = "Это локальная переменная";
    console.log(localVar); 
  }
  console.log(localVar); 
}
example();

Поскольку let имеет блочную область видимости, то переменная localVar будет видна только внутри блока if. 

Внутри блока мы успешно выводим значение переменной localVar. А вот попытка вывести значение переменной вне этого блока сразу вызовет ошибку. Это более логичное поведение по сравнению с var.

Переназначение и повторное объявление

Повторно объявить переменную let в том же блоке кода нельзя:

let y = 20;
let y = 30

Код вызовет ошибку: переменная уже объявлена.

А вот переназначить переменную let в том же блоке — можно.

let y = 20;
y = 50

Const

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

Обращение

Значение const должно быть сразу определено сразу при объявлении переменной. Нельзя обратиться к переменной до её инициализации.

Сравним его с let и var:

var d
console.log(d)
let e
console.log(e)
const i
console.log(i)

Область видимости

Здесь поведение const такое же, как и у let. Возьмём наш пример с функцией и убедимся в этом:

function example() {
  if (true) {
    const localVar = "Это локальная переменная";
    console.log(localVar); 
  }
  console.log(localVar); 
}
example();

Область видимости переменной localVar ограничивается блоком if, где она объявлена. Поэтому обращение к ней вне этого блока вызовет ошибку:

Переназначение и повторное объявление

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

const pi = 3.14159265358979323846
const pi = 3.15

Что и когда выбрать

Главное различие этих переменных — разная область видимости и возможность переназначения.

Используем var, когда:

В остальных случаях почти всегда используется let, чтобы избежать неожиданного поведения программы и странных ошибок.

А вот const нужен для того, чтобы задать неизменяемую переменную — константу. Короче, если переменная будет меняться, то let, а если не будет — то const