Перший крок до розуміння let, const та var в JavaScript

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

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

Розуміння var, let і const

1. var:

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

• Область видимості (Scope): var має область видимості на рівні функції, що означає, що якщо ви оголосите змінну всередині функції, вона буде доступна тільки в межах цієї функції. Якщо оголосити її поза функцією, вона буде мати глобальну область видимості.
• Підйом (Hoisting): Змінні, оголошені за допомогою var, піднімаються (hoisted) до верху своєї області видимості. Це означає, що оголошення змінної переміщується на початок коду під час виконання, але її значення присвоюється на місці оголошення.

Ось приклад використання var:

function exampleVar() {  
 console.log(myVar); // Вивід: undefined (через підйом)  
 var myVar = 5;  
 console.log(myVar); // Вивід: 5  
}

exampleVar();

У цьому прикладі, myVar піднімається на початок функції, але її значення — undefined до того, як присвоєно значення.

2. let:

З введенням ES6 (ECMAScript 2015), JavaScript представив нове ключове слово — let. Воно має кілька покращень порівняно з var:

• Область видимості (Scope): let має область видимості на рівні блоку, що означає, що воно обмежене найближчим блоку (наприклад, в умовах if, циклі, або функції).
• Без підйому (No Hoisting): Змінні, оголошені за допомогою let, також піднімаються, але на відміну від var, вони не ініціалізуються, поки код не досягне оголошення. Це часто називають "тимчасовою мертвою зоною" (temporal dead zone, TDZ).

Ось приклад використання let:

function exampleLet() {  
 if (true) {  
 let myVar = 10;  
 console.log(myVar); // Вивід: 10  
 }  
 console.log(myVar); // Помилка: myVar не визначено  
}

exampleLet();

У цьому прикладі, myVar доступна тільки всередині блоку if, що демонструє область видимості на рівні блоку. Спроба доступу до myVar поза блоком призводить до помилки.

3. const:

const схожий на let тим, що він також має область видимості на рівні блоку. Однак є одна важлива відмінність:

• Незмінність (Immutability): const використовується для оголошення змінних, значення яких не може бути переназначене після початкового присвоєння. Це не означає, що вміст змінної незмінний — лише те, що сама змінна не може бути переназначена.
• Область видимості (Scope): Як і let, const має область видимості на рівні блоку.

Ось приклад використання const:

function exampleConst() {  
 const myConstant = 20;  
 console.log(myConstant); // Вивід: 20

// Переназначення призведе до помилки  
 // myConstant = 30; // Помилка: Присвоєння значення змінній, що є константою.
}exampleConst();

У цьому прикладі спроба переназначити myConstant після початкового присвоєння викликає помилку.

Коли слід використовувати кожен із них?

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

Висновок

Під час роботи з JavaScript важливо знати, коли і як використовувати var, let і const, щоб писати чистий, безпомилковий код. У сучасній розробці JavaScript зазвичай рекомендується використовувати let і const замість var, щоб уникнути поширених проблем, пов'язаних з областями видимості та підйомом (hoisting).

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

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

Перекладено з: The first step into understanding let, const and var in Javascript