При вивченні JavaScript одним з перших кроків, з яким ви зіткнетеся, буде оголошення змінних. JavaScript надає три способи для цього: var, let і const. Спочатку вони можуть здатися схожими, але насправді вони працюють по-різному, і знання, коли використовувати кожен з них, є важливим для написання хорошого коду.
Ось розбір, який допоможе вам зрозуміти відмінності, з прикладами для кращого розуміння.
1. var — Старий спосіб
var — це найстаріший спосіб оголошення змінних в JavaScript. Він працює, але має деякі особливості, які роблять його менш ідеальним для сучасного коду.
Основні моменти:
• Область видимості: var має область видимості функції. Якщо ви оголосите змінну всередині функції, вона залишатиметься в цій функції. Але якщо оголосити її зовні, вона стане глобальною.
• Підйом (Hoisting): Змінні, оголошені через var, піднімаються вгору області видимості, тобто ви можете використовувати їх до того, як вони фактично будуть оголошені (але значення буде undefined, поки не буде досягнута їх декларація).
• Повторне оголошення: Ви можете повторно оголосити змінну var в одній і тій самій області видимості без помилок.
Приклад:
function demoVar() {
. console.log(a); // undefined (hoisted)
. var a = 10;
. console.log(a); // 10
}
demoVar();
// Повторне оголошення дозволено
var x = 5;
var x = 10;
console.log(x); // 10
Чому більше не використовувати var? Його функціональна область видимості та можливість повторного оголошення можуть викликати непередбачувані помилки, особливо в більших програмах.
2. let — Сучасний вибір
let був введений в ES6 (2015) і зараз є основним способом оголошення змінних, які можуть змінюватися.
Основні моменти:
• Область видимості: let має блочну область видимості, тобто існує тільки в тому блоці ({}), де ви його оголосили.
• Без доступу до підйому: На відміну від var, ви не можете використовувати let до того, як воно буде оголошене. Якщо спробуєте, отримаєте помилку.
• Без повторного оголошення: Ви не можете оголосити одну і ту саму змінну let більше ніж один раз у межах однієї області видимості.
Приклад:
function demoLet() {
. // console.log(b); // Error: Cannot access ‘b’ before initialization
. let b = 20;
. console.log(b); // 20
}
demoLet();
// Приклад блочної області видимості
if (true) {
. let y = 30;
. console.log(y); // 30
}
// console.log(y); // Error: y is not defined
Чому використовувати let? Це безпечніше, оскільки воно уникає проблем з підйомом та повторним оголошенням.
3. const — Для фіксованих значень
const також з'явився в ES6 і використовується, коли ви не хочете змінювати значення змінної.
Основні моменти:
• Область видимості: Як і у випадку з let, const має блочну область видимості.
• Без повторного присвоєння: Після того, як ви присвоїте значення const, ви не зможете змінити його.
• Повинна бути ініціалізована: Ви повинні надати значення const під час оголошення.
Приклад:
const z = 50;
console.log(z); // 50
// z = 60; // Error: Assignment to constant variable
// const must be initialized
// const a; // Error: Missing initializer in const declaration
Примітка про об'єкти та масиви:
Хоча значення const не можна переназначити, якщо ви використовуєте const з об'єктами або масивами, їх вміст все одно можна змінювати.
const obj = { name: "Alice" };
obj.name = "Bob"; // Works fine
console.log(obj); // { name: "Bob" }
Чому використовувати const? Це ідеально підходить для значень, які не повинні змінюватися, таких як налаштування або константи у вашій програмі.
Швидка таблиця порівняння
| Особливість | var | let | const |
| ——————| —————— | —————— | —————— |
| Область видимості | Функція або глобальна | Блок | Блок |
| Підйом | Так (undefined) | Так (помилка при ранньому доступі) | Так (помилка при ранньому доступі) |
| Повторне оголошення | Дозволено | Не дозволено | Не дозволено |
| Переназначення | Дозволено | Дозволено | Не дозволено |
| Ініціалізація | Опціонально | Опціонально | Обов'язково |
Який варіант вибрати?
Ось як я це розумію:
• Використовуйте let для більшості змінних, особливо коли значення має змінюватися.
• Використовуйте const для змінних, які не повинні змінюватися, таких як значення конфігурацій або фіксовані дані.
• Уникайте var, якщо тільки ви не працюєте зі старим JavaScript кодом.
Практичний приклад
Ось простий приклад, який використовує всі три варіанти:
const TAX_RATE = 0.1; // Константне значення
let total = 0; // Змінна, що змінюється
function calculatePrice(price) {
. total += price + price * TAX_RATE;
.
return total;
}
console.log(calculatePrice(100)); // 110
console.log(calculatePrice(50)); // 165
Зрозумівши різницю між var, let і const, ви зможете писати чистіший та надійніший код. Спочатку це може здаватися складним, але коли ви попрактикуєтесь, це стане другою натурою!
Перекладено з: [Understanding let, const, and var in JavaScript](https://medium.com/@collinsaninze/understanding-let-const-and-var-in-javascript-df6a7910a10f)