🚀 Вам бесплатно доступен тренажёр по HTML и CSS.

Если вы недавно пишете на JavaScript, то наверняка задавались вопросом, чем отличаются var и let, и что выбрать в каждом случае. Объясняем.

var и let — это просто два способа объявить переменную. Вот так:

var x = 10;
let y = 20;

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

function myFunction() {
  var z = 30;
  console.log(z); // 30
}
myFunction();
console.log(z); // ReferenceError

Это может создавать неожиданные ситуации. Допустим, вы создаёте цикл в функции и хотите, чтобы переменная i осталась в этой функции. Если вы используете var, эта переменная «утечёт» за пределы цикла и будет доступна во всей функции.

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

if (true) {
  let a = 40;
  console.log(a); // 40
}
console.log(a); // ReferenceError

В JavaScript блок кода — это участок кода, заключённый в фигурные скобки {}. Это может быть цикл, код в условном операторе или что-нибудь ещё.

if (true) {
  let blockScoped = "Я виден только здесь";
  console.log(blockScoped); // "Я виден только здесь"
}

// здесь переменная blockScoped недоступна
console.log(blockScoped); // ReferenceError

Если переменная j объявлена в цикле с let, она останется только в этом цикле, и попытка обратиться к ней за его пределами вызовет ошибку.

Поднятие

В JavaScript есть механизм поднятия (hoisting), при котором объявления переменных перемещаются в начало их области видимости при выполнении кода. Это работает по-разному для var и let.

Например, вы выводите значение переменной в консоль, и она вернёт undefined, если инициализация произойдёт позже.

// Как JavaScript видит ваш код
var hoistedVar;
console.log(hoistedVar); // undefined
hoistedVar = "Теперь я определен!";

С let такого не произойдёт; любая попытка обратиться к переменной до её объявления вызовет ошибку.

// Этот код вызовет ошибку
console.log(hoistedLet); // ReferenceError
let hoistedLet = "Теперь я определен!";

Когда использовать var и let

Когда выбрать var

  • Когда нужна переменная с функциональной областью видимости или глобальная переменная (хотя это не очень хорошая практика).
  • Когда работаете с устаревшим кодом, где уже используется var.

Когда выбрать let

  • Когда вам нужна переменная с блочной областью видимости, которую не нужно тянуть в другие части программы.
  • Когда вы хотите избежать неожиданного поведения, связанного с поднятием.

В современной разработке и новых проектах разработчики предпочитают let и const из-за их предсказуемости и надёжности.