let, const та var у JavaScript з прикладами

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

1. var — Старий спосіб

До того, як JavaScript отримав let і const, var був єдиним варіантом. Ось що вам слід знати про нього:

• Функціональна область видимості (Function Scope): Коли ви оголошуєте змінну за допомогою var всередині функції, вона існує тільки в цій функції. Не має значення, чи знаходиться вона всередині блоку (наприклад, в операторі if або циклі).
• Піднесення (Hoisting): Це модне слово для того, як JavaScript "переміщає" оголошення змінних на початок функції або скрипту. Але він переміщує лише оголошення, а не значення.

Приклад з var:

function testVar() {  
 console.log(x); // undefined, бо оголошення піднято, але не значення  
 var x = 10;  
 console.log(x); // 10, після того, як значення присвоєно  
}

У цьому прикладі, навіть хоча x оголошено після першого виклику console.log(), JavaScript "піднімає" оголошення на початок, але не встановлює значення до пізніше.

2. let — Новіший, розумніший спосіб

let з'явився в ES6 (великому оновленні JavaScript) і є великим покращенням порівняно з var. Ось чому:

• Блокова область видимості (Block Scope): З let змінна існує тільки всередині блоку (наприклад, в циклі або операторі if), де вона оголошена. Це відрізняється від var, який не враховує блоки.
• Без проблем з піднесенням: Хоча let і піднімається (переміщується на початок), ви не можете використовувати його до того, як воно буде оголошено — спроба зробити це призведе до помилки.

Приклад з let:

function testLet() {  
 if (true) {  
 let y = 20;  
 console.log(y); // 20  
 }  
 // console.log(y); // Помилка! y не визначена поза блоком  
}

Зверніть увагу, що y працює тільки всередині оператора if. Ззовні її не існує, і спроба використовувати її призведе до помилки.

3. const — Постійна (незмінна) змінна

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

• Незмінність (Immutability): Коли ви використовуєте const, ви повинні одразу призначити значення, і після цього ви не можете перепризначити його. Однак, якщо змінна const є об'єктом або масивом, ви все одно можете змінювати вміст всередині нього (але не перепризначити сам об'єкт або масив).

Приклад з const:

const z = 30;  
console.log(z); // 30  
// z = 40; // Помилка! Ви не можете перепризначити змінну const

const obj = { a: 1 };  
obj.a = 2; // Це нормально! Ви можете змінювати вміст об'єкта або масиву  
console.log(obj); // { a: 2 }

У цьому прикладі z не можна змінити, але ми можемо змінювати властивості obj.

Коли який використовувати?

• Використовуйте var: Якщо ви працюєте зі старим JavaScript кодом або вам потрібна функціональна область видимості (хоча варто уникати var в сучасному коді).
• Використовуйте let: Для змінних, які можуть змінюватися, особливо коли вам потрібно, щоб вони були обмежені блоком (наприклад, всередині циклу або умови).
• Використовуйте const: Для змінних, значення яких не повинні змінюватися — наприклад, для постійних значень або об'єктів, властивості яких залишаються незмінними.

Висновок: Підсумовуючи:

• var є застарілим і не ідеальним для сучасного JavaScript.
• let — ваш вибір, коли змінна змінюється, але обмежена своїм блоком.
• const слід використовувати, коли значення змінної ніколи не змінюється.

Перекладено з: let, const, and var in JavaScript with Examples