Оригінальна публікація: Var, Let, and Const – What's the Difference?

В ES2015 (ES6) з’явилось багато блискучих функцій. Вже минуло більше п’яти років і можна припустити, що багато розробників JavaScript ознайомилися з цими функціями та почали їх використовувати.

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

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

У цій статті ми обговоримо var, let та const щодо області видимості, використання та підняття. Зверніть увагу на відмінності, які я вкажу.

Var

До появи ES6 правили оголошення var. Проте є проблеми, пов’язані зі змінними, які оголошені з var. Ось чому виникла необхідність у появі нових способів оголошення змінних. По-перше, давайте краще зрозуміємо var, перед тим як обговорювати ці проблеми.

Область видимості var

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

Область є глобальною, якщо змінна var оголошена поза функцією. Це означає, що будь-яка змінна, оголошена з var поза блоком функції, доступна для використання у всьому вікні.

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

Щоб краще зрозуміти, подивіться на приклад нижче.

    var greeter = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }

У прикладі greeter має глобальну область видимості, оскільки існує поза функцією, тоді як hello має область функції. Тому ми не можемо отримати доступ до змінної hello поза функцією. А якщо ми зробимо так:

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined

Ми отримаємо помилку через те, що hello недоступна поза функцією.

Змінні var можна переголосити та оновити

Це означає, що ми можемо робити це в тій самій області та не отримаємо помилку.

    var greeter = "hey hi";
    var greeter = "say Hello instead";

і це

    var greeter = "hey hi";
    greeter = "say Hello instead";

Підняття var

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

    console.log(greeter);
    var greeter = "say Hello"

воно інтерпретується так:

    var greeter;
    console.log(greeter); // greeter is undefined
    greeter = "say Hello"

Таким чином змінні var підіймаються наверх своєї області та ініціалізуються значенням undefined.

Проблематика var

У var є слабке місце. Я використаю приклад нижче, щоб пояснити:

    var greeter = "hey hi";
    var times = 4;

    if (times > 3) {
        var greeter = "say Hello instead"; 
    }
    
    console.log(greeter) // "say Hello instead"

Оскільки times > 3 повертає true, greeter перевизначається на "say Hello instead". Це не є проблемою, якщо ви хочете, щоб greeter був перевизначений; але стає проблемою, коли ви не усвідомлюєте, що змінна greeter була визначена раніше.

Якщо ви використовували greeter в інших частинах свого коду, ви можете бути здивовані виводом, який можете отримати. Ймовірно, це спричинить багато помилок у коді. Ось чому let та const необхідні.

Let

Тепер для оголошення змінної найкращим варіантом є let. Це не дивно, оскільки вона створена для вдосконалення оголошень var. Вона також розв’язує проблематику var, яку ми щойно розглянули. Розглянемо, чому так.

let має блокову область

Блок — це фрагмент коду, обмежений {}. Блок живе у фігурних дужках. Будь-що у фігурних дужках є блоком.

Отже, змінна, оголошена в блоці з let, доступна для використання лише в цьому блоці. Поясню на прикладі:

   let greeting = "say Hi";
   let times = 4;

   if (times > 3) {
        let hello = "say Hello instead";
        console.log(hello); // "say Hello instead"
    }
   console.log(hello) // hello is not defined

Як бачимо, використання hello поза блоком (фігурні дужки) повертає помилку. Це тому, що змінні let мають блокову область.

let можна оновити, але не переголосити

Як і var, змінна, оголошена з let, може бути оновлена в межах області видимості. На відміну від var, змінна let не може бути переголошена в межах області видимості. Це працюватиме:

    let greeting = "say Hi";
    greeting = "say Hello instead";

а це поверне помилку:

    let greeting = "say Hi";
    let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared

Однак, якщо ту саму змінну визначено в різних областях, помилки не буде:

    let greeting = "say Hi";
    if (true) {
        let greeting = "say Hello instead";
        console.log(greeting); // "say Hello instead"
    }
    console.log(greeting); // "say Hi"

Чому немає помилки? Це тому, що обидва випадки розглядаються як різні змінні, оскільки вони мають різні області.

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

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

Підняття let

Подібно до var, оголошення let підіймаються наверх. На відміну від var, яке ініціалізується як undefined, ключове слово let не ініціалізується. Тому якщо ви спробуєте використати змінну let перед оголошенням, ви отримаєте Reference Error.

Const

Змінні, оголошені з const, зберігають постійні значення. Оголошення const має деяку схожість з оголошенням let.    

Оголошення const мають блокову область

Як і до оголошень let, до оголошень const можна отримати доступ лише в межах блоку, у якому вони були оголошені.

Const не можна оновити або переголосити

Це означає, що значення змінної, оголошеної з const, залишається таким самим у межах області видимості. Його не можна оновити чи переголосити. Тому якщо ми оголосимо змінну з const, ми не зможемо зробити так:

    const greeting = "say Hi";
    greeting = "say Hello instead";// error: Assignment to constant variable.

чи так:

    const greeting = "say Hi";
    const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared

Тому кожне оголошення const повинне бути ініціалізоване під час оголошення.

Ця поведінка дещо відрізняється, коли йдеться про об’єкти, оголошені з const. Хоча об’єкт const неможливо оновити, можна оновити його властивості. Отже, якщо ми оголосимо об’єкт const ось так:

    const greeting = {
        message: "say Hi",
        times: 4
    }

але не можемо ось так:

    greeting = {
        words: "Hello",
        number: "five"
    } // error: Assignment to constant variable.

ми зможемо зробити ось так:

    greeting.message = "say Hello instead";

Це оновить значення greeting.message без повернення помилок.

Підняття const

Подібно до let, оголошення const підіймаються наверх, але не ініціалізуються.

Тож на випадок, якщо ви пропустили відмінності, ось вони:

  • Оголошення var мають глобальну область видимості або область функції, тоді як let і const мають блокову область видимості.
  • Змінні var можна оновити та переголосити в межах їхньої області; змінні let можна оновити, але не переголосити; змінні const не можна ні оновити, ні переголосити.
  • Усі вони підіймаються наверх своєї області. Але тоді як змінні var ініціалізуються з undefined, змінні let і const не ініціалізуються.
  • Хоча var і let можуть бути оголошені без ініціалізації, const повинна бути ініціалізована під час оголошення.

Маєте запитання чи доповнення? Будь ласка, дайте мені знати.

Дякую, що прочитали :)