Відмінність між var, let та const у JavaScript

У JavaScript змінні оголошуються за допомогою трьох ключових слів – var, let та const. Вони суттєво відрізняються за областю видимості, можливістю повторного оголошення та зміною значення. У цій статті ми детально розглянемо особливості кожного з них.

var – старий спосіб оголошення змінних

Ключове слово var з’явилось ще у ранньому JavaScript і сьогодні використовується рідко. Головні особливості:

1. Можна повторно оголошувати

var name = 'Alex';
var name = 'John'; //дозволено

console.log(name); // John

2. Має функціональну або глобальну область видимості

var не враховує блочні межі {}, тому змінна доступна поза блоком:

if (true) {
  var city = 'Kyiv';
}

console.log(city); // Kyiv

3. Hoisting

Оголошення змінної «піднімається» на початок області видимості (hoisting). Тому перед фактичним оголошенням змінна існує, але має значення undefined:

console.log(age); // undefined

var age = 25;

let – сучасний спосіб

Ключове слово let було додано у ES6 і стало стандартом для змінних, значення яких планується змінювати.

1. Значення можна змінювати

let age = 25;
age = 30;

console.log(age); // 30

2. Блочна область видимості

let працює в межах блоку {}, тому змінна недоступна поза ним:

if (true) {
  let city = 'Kyiv';
  console.log(city); // Kyiv
}

console.log(city); // ReferenceError: city is not defined

3. Без повторного оголошення в одному блоці

let name = 'Alex';
let name = 'John'; // Cannot redeclare block-scoped variable 'name'

4. Hoisting з тимчасовою мертвою зоною (Temporal Dead Zone, TDZ)

Оголошення змінної «піднімається» на початок блоку, але сама змінна залишається недоступною до рядка з її ініціалізацією. Будь-яке звернення до неї раніше викличе ReferenceError:

console.log(count); // ReferenceError: Cannot access 'count' before initialization
let count = 10;

const – значення не можна перевизначити

const використовують для змінних, значення яких не планується змінювати після оголошення.

1. Обов’язкова ініціалізація та заборона повторного присвоєння

const age = 25;
age = 30; // TypeError: Assignment to constant variable

Змінну, оголошену через const, потрібно одразу ініціалізувати. Після цього їй не можна присвоїти нове значення.

2. Блочна область видимості

Як і let, const працює в межах блоку {}:

if (true) {
  const city = 'Kyiv';
  console.log(city); // Kyiv
}

console.log(city); // ReferenceError: city is not defined

3. Об’єкти та масиви: змінюється вміст, а не змінна

Для об’єктів і масивів заборонено змінювати саме посилання, але дозволено змінювати вміст:

const user = { name: 'Alex' };
user.name = 'John'; // можна змінювати властивості
console.log(user.name); // John

user = {}; // TypeError: Assignment to constant variable

4. Hoisting з тимчасовою мертвою зоною (Temporal Dead Zone, TDZ)

Для const поведінка ідентична до let: оголошення «піднімається» на початок блоку, але змінна залишається недоступною до рядка з її ініціалізацією (яка є обов’язковою). Будь-яке звернення до неї раніше викличе ReferenceError:

console.log(role); // ReferenceError: Cannot access 'role' before initialization
const role = 'admin';

Підсумок

У сучасному JavaScript найкращою практикою вважається використання const за замовчуванням. Якщо значення змінної потребуватиме зміни – використовуйте let. Ключове слово var варто застосовувати лише під час роботи зі старим кодом або в прикладах, що стосуються попередніх версій мови.

Мітки: