Чтобы понять разницу ключевых слов var, let и const, необходимо разобраться с тем, что такое область видимости.

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

<aside> 👉 Область видимости – это зона, в которой переменные доступны, то есть в которой мы к этим переменным можем обратиться. Есть 3 вида области видимости: глобальная, функциональная и блочная.

</aside>

Пример:

// Глобальная
console.log('1');

function exampleFunc() {
  // Функциональная
  console.log('2');
}

if (true) {
  // Блочная
  console.log('3');
  console.log('4');
  console.log('5');
}

for (let i = 0; i < 10; i++) {
  // Блочная
  console.log('6');
  console.log('7');
  console.log('8');
}

<aside> 👉 Глобальная – это самая внешняя область. Когда мы создаём переменные просто в JS-файле, подключенном к HTML, мы создаём их в глобальной области видимости

</aside>

Противопоставляются ей функциональная и блочная область видимости – это меньшие, локальные области.

<aside> 👉 Функциональная – это область внутри функции

</aside>

<aside> 👉 Блочная – внутри блока с фигурными скобками: например, внутри цикла for , while или блока if/else

</aside>

Внутри области видимости мы можем видеть переменные из этой области + переменные из родительской области видимости. То есть если переменная создаётся в глобальной области видимости, то она также всегда будет доступна и в функциональной области.

Наоборот это не работает: у родительских областей нет доступа к дочерним. Поэтому переменную, созданную внутри функции, мы не сможем использовать за её пределами.

Переменные var

<aside> ❗ У var функциональная область видимости

</aside>

Это является корнем всех проблем с переменными, созданными через var.

Всего есть 3 проблемы:

1. Переменная не ограничивается блоком кода, в котором она была создана (даже если создана внутри цикла, она будет видна и снаружи)