Різниця між let та var в JavaScript

Як ви вже можливо знаєте, let це нове ключове слово в ECMAScript 6. Хоча let працює майже, як var, є одна істотна відмінність. Ця стаття пояснює різницю між цими двома ключовими словами в JavaScript.

Маштаб

Різниця полягає в маштабі. Змінні, оголошені з var знаходяться в області видимості функції, в якій були оголошенні, а ті, які були оголошенні з let знаходяться в області видимості охоплюючого (зовнішнього) блоку (яка може бути менше, ніж область видимості функції). Давайте проаналізуємо це на прикладі.

    function simpleLoop(){
    	/* i доступна тут через встановлення(hoisting) */
       for(var i=0;i<10;i++){
    	  console.log(i);
    	  /* звісно i доступна тут */
       }
       /* i доступна */
    }

Фрагмент вище показує простий цикл. Змінна i оголошена з ключовим словом var, вона встановлена(hoisted) та доступна для всієї функції. Давайте змінимо фрагмент використовуючи let замість var.

    function simpleLoop(){
    	/* i невидима тут */
       for(let i=0;i<10;i++){
    	  console.log(i);
    	  /* i в області видимості цього блоку */
       }
       /* i недоступна тут */
    }

У наведеному вище прикладі, змінна i знаходиться в області видимості циклу for. Якщо ви спробуєте отримати доступ неї до або після циклу, ви отримаєте помилку ReferenceError.

Змінні, оголошені з var знаходяться в області видимості блоку функції, а ті, які оголошені з let знаходяться в області видимості до найближчого зовнішнього блоку.

Блок та вираз Let

Ключове слово let також дозволяє присвоювати значення змінних в певному блоці, не зачіпаючи інші змінні з тим же ім'ям поза блоком.

Це робиться таким чином:

    let (name = 'Sandeep', message = 'Good Morning!') {
      console.log(message+' '+name);
    }

Тут змінні name і message знаходяться в області видимості блоку let.

З let також можна оголошувати змінні, які знаходяться в області видимості одного виразу. Наступний фрагмент демонструє це.

    let (x=5) console.log(x+5);

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

    var x=12; //12
    let(x=2) console.log(x); //2
    console.log(x+2); //14

Таким чином, ми розглянули різницю між let та var. Тим не менш, ви повинні пам'ятати, що ці особливості все ще експериментальні та підтримка браузерів обмежена. Щоб точно знати, які браузери підтримують ключове слово let перегляньте цю діаграму.