Від var до const: Розкриття таємниць оголошень змінних у JavaScript

Коли ви починаєте вивчати JavaScript та багато інших мов програмування, перше, з чим ви стикаєтесь, це оголошення змінних, що є важливою частиною кожної кодової бази. Роки розробники покладалися на var, але з появою ES6 все змінилося. Два нових гравця, let і const, вийшли на сцену, обіцяючи кращий доступ до області видимості і менше помилок. Тож, у чому різниця між ними, коли і як їх слід використовувати? Давайте розглянемо це за допомогою прикладів, зрозумілих навіть для розробника, якого вже давно підкріплює кава о 2 ночі. Слідкуйте за мною, поки я перелічу два основні моменти, що зробили різницю між ними.

Почнемо з найстаршого з трьох — var.

1. var – Старий охоронець

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

Основні особливості var:

• Область видимості функції: Його не цікавлять блоки ({}), тільки функції.
• Підйом змінних (Hoisting): Можна використовувати до того, як оголосили, але це може призвести до несподіваних багів.

Приклад:

function oldSchool() {  
 if (true) {  
 var message = "Я доступний всюди в цій функції!";  
 }  
 console.log(message); // Працює, хоча він був оголошений всередині блоку.  
}  
oldSchool();

Як ви можете побачити в прикладі, змінну використовували до того, як її оголосили. Це не є гарною практикою, бо у великій кодовій базі це точно спричинить багато помилок, і удачі вам їх виправляти! Переходимо до наступного.

2. let – Сучасний гнучкий герой, який ПОВАЖАЄ ПРАВИЛА!!

let було введено, щоб виправити проблему області видимості var. Це як крутий молодший брат, який знає, як грати за правилами.

Основні особливості let:

• Область видимості блоку: Змінна існує лише в межах блоку, в якому вона була оголошена, що означає, що ви не можете звертатися до цієї змінної за межами блоку, інакше отримаєте undefined.
• Відсутність підйому (No Hoisting): Ви не можете використовувати let до того, як оголосите її. let уникає проблеми підйому, змінна доступна тільки після того, як її оголосили.

Приклад:

function modern() {  
 if (true) {  
 let message = "Я доступний лише всередині цього блоку.";  
 console.log(message); // Працює нормально тут.  
 }  
 // console.log(message); // Помилка: message не визначена, оскільки вона поза блоком  
}  
modern();

Приклад 2:

Цей приклад показує, чому для циклів краще використовувати let замість var:

for (let i = 0; i < 5; i++) {  
 // 'i' доступна лише всередині цього блоку циклу  
 console.log(i); // Виведе: 0, 1, 2, 3, 4  
}  
 console.log(i); // Це спричинить помилку: i не визначена

Натомість, якби ми використали var:

for (var i = 0; i < 5; i++) {  
 console.log(i); // Виведе: 0, 1, 2, 3, 4  
}  
console.log(i); // Виведе: 5 (i доступна поза циклом!)

Чому це важливо для лічильників циклів?

• Лічильники циклів повинні використовуватись лише всередині циклу.
• let забезпечує це, запобігаючи випадковому використанню або зміні змінної лічильника поза циклом, що може призвести до помилок.

Підсумок:

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

3. const – Непохитний рок-зірка

const — це тип, що не терпить ніяких умовностей. Як тільки ви його оголосите, він не дозволить вам змінювати значення.
Це ідеальний варіант для речей, які не повинні змінюватися, наприклад, для значень конфігурацій чи сталих значень.

Основні особливості const:

• Область видимості блоку: Як і let, він обмежений своїм блоком.
• Неможливість переприсвоєння: Після оголошення ви не можете змінити його значення.

Приклад

const pi = 3.14;  
console.log(pi); // 3.14  


//якщо ви спробуєте змінити значення pi, як ось тут:  

// pi = 3.14159; // Помилка: Присвоєння до сталого значення.

А як щодо об'єктів та масивів?
Ось і поворот: хоча ви не можете переприсвоїти об'єкт або масив, оголошений через const, ви можете змінювати його вміст.

const fruits = ["apple", "banana"];  
fruits.push("cherry");  
console.log(fruits); // ["apple", "banana", "cherry"]  

// fruits = ["orange"]; // Помилка: Присвоєння до сталого значення.

Порівняння трьох варіантів

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

• Використовуйте **const** за замовчуванням, якщо ви не знаєте, що змінна буде змінюватися.
• Використовуйте **let**, коли потрібно переприсвоєння (наприклад, у циклах).
• Уникайте **var** у сучасному коді — let і const краще охоплюють всі його випадки використання.

Перекладено з: “JavaScript Variables Explained: When to Use let, const, and Avoid var"