Пошук уроків, статей та іншого контенту
Різниця між var, let і const: область видимості, hoisting та коли що використовувати.
У JavaScript є три ключові слова для оголошення змінних: var, let і const. Вони відрізняються областю видимості (scope), поведінкою при повторному оголошенні та можливістю зміни значення.
var має функціональну область видимості (function scope), а не блочну. Це означає, що змінна, оголошена всередині if або циклу, буде доступна за межами блоку:
if (true) {
var message = "Привіт";
}
console.log(message); // "Привіт" — доступна поза блокомvar також піддається hoisting — оголошення піднімається на початок функції, а значення — ні. Це часто спричиняє помилки для новачків.
let і const мають блочну область видимості (block scope):
if (true) {
let message = "Привіт";
console.log(message); // "Привіт"
}
console.log(message); // ReferenceError: message is not definedРізниця між let і const проста: const не дозволяє повторне присвоєння значення змінній після ініціалізації.
const pi = 3.14159;
pi = 3; // TypeError: Assignment to constant variable.Правило за замовчуванням: використовуйте const, якщо значення не буде змінюватись. Використовуйте let, якщо змінна дійсно потребує перепризначення. Уникайте var у новому коді.
Важливий нюанс: const забороняє перепризначення самої змінної, але не забороняє змінювати вміст об'єкта чи масиву:
const user = { name: "Олена" };
user.name = "Марія"; // це працює!
user = {}; // а це — ні, TypeErrorВикористання var у циклах з асинхронним кодом (setTimeout, обробники подій) — усі колбеки бачать одну й ту саму змінну.
Спроба оголосити одну й ту саму змінну через let двічі в тій самій області видимості — SyntaxError.
Забування, що const не захищає вміст об'єктів і масивів від змін.
var має функціональну область видимості й піддається hoisting зі значенням undefined — джерело неочевидних багів, тому в новому коді її уникають. let і const мають блочну область видимості; const забороняє повторне присвоєння самій змінній, але не захищає вміст об'єктів і масивів від зміни. Правило за замовчуванням: const, доки значення дійсно не потрібно перепризначити — тоді let.
Спробуйте самостійно
Створіть масив const numbers = [1, 2, 3] і спробуйте: 1) додати елемент через numbers.push(4), 2) перепризначити numbers = [5, 6]. Поясніть собі, чому перше спрацює, а друге — ні.