Область видимості з var | let | const

JavaScriptJunior~2 хв читання

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

Ключове слово	Область видимості
`var`	Функціональна (function scope)
`let`, `const`	Блочна (block scope)

Функціональна область - змінна видна в усій функції, де оголошена, незалежно від блоку {}. Блочна область - змінна видна лише всередині блоку { ... }, де оголошена.

Приклад

javascript

function test() {
  if (true) {
    var x = 1;
    let y = 2;
    const z = 3;
  }

  console.log(x); // 1
  console.log(y); // ReferenceError
  console.log(z); // ReferenceError
}
test();

x доступний, тому що var "ігнорує" блок if і піднімається на рівень функції. А y і z видні лише всередині if.

2. Підняття (hoisting)

Усі змінні піднімаються (hoisted), але поводяться по-різному.

Ключове слово	Піднімається	Можна використати до оголошення?
`var`	так	так, але `undefined`
`let`, `const`	так	ні (помилка через TDZ - temporal dead zone)

Приклад з `var`

javascript

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

JS "піднімає" оголошення var a, але не присвоєння (a = 10).

Приклад з `let` і `const`

javascript

console.log(b); // ReferenceError
let b = 20;

Хоча b піднімається, вона перебуває у "тимчасовій мертвій зоні" (TDZ)

від початку області до фактичного оголошення.

3. Повторне оголошення

Ключове слово	Повторно оголосити можна?
`var`	Так (перезапише значення)
`let`, `const`	Ні (SyntaxError)

Приклад

javascript

var x = 1;
var x = 2; // дозволено
console.log(x); // 2

let y = 1;
let y = 2; // SyntaxError

4. Перепризначення значення

Ключове слово	Можна змінити значення?
`var`	Так
`let`	Так
`const`	Ні (але об'єкт всередині можна мутувати)

Приклад

javascript

let name = 'Tim';
name = 'Oleh'; // можна

const user = { name: 'Tim' };
user.name = 'Oleh'; // можна мутувати об'єкт
user = {}; // TypeError - не можна перепризначити посилання

5. Приклад, що показує всі відмінності

javascript

function demo() {
  console.log(a); // undefined
  // console.log(b); // ReferenceError
  // console.log(c); // ReferenceError

  var a = 1;
  let b = 2;
  const c = 3;

  if (true) {
    var a = 10; // та сама змінна!
    let b = 20; // нова змінна
    const c = 30; // нова змінна
    console.log(a, b, c); // 10 20 30
  }

  console.log(a, b, c); // 10 2 3
}

demo();

var a "витекла" з блоку, а let і const створили власні локальні змінні всередині блоку.

6. Де що використовувати

Ключове слово	Коли використовувати
`let`	Для змінних значень
`const`	Типово - завжди (якщо не потрібно змінювати посилання)
`var`	Ніколи (тільки для підтримки старого коду)

ПІДСУМОК

Властивість	`var`	`let`	`const`
Область видимості	Функціональна	Блочна	Блочна
Піднімається	Так	Так	Так
Використання до оголошення	undefined	Помилка (TDZ)	Помилка (TDZ)
Повторне оголошення	Так	Ні	Ні
Перепризначення	Так	Так	Ні
Сучасний стандарт	Застарілий	Рекомендується	Типово

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.