Чим відрізняються const, var та let в JavaScript?

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

Отже, ключові відмінності між const, var та let це: можливість відкладеного визначення значення змінної, можливість перевизначення значення, повторне оголошення, дотримання/ігнорування блочної області видимості та hoisting. А тепер докладніше.

Можливість відкладеного визначення значення змінної

const – значення має бути визначено під час оголошення змінної (відразу).

const greeting = 'Hello world!';

var, let - Значення може бути визначено пізніше.

var greeting; 
greeting = 'Hello world!';

Можливість перевизначення значення

const - Значення у констант не перевизначаються.

const greeting = 'Hello world!';
greeting = 'Hello Marry!'; // TypeError: Assignment to constant variable.

var, let - Значення може бути перевизначено в майбутньому.

let greeting = 'Hello world!';
greeting = 'Hello Mary!'; // value is 'Hello Mary!' now

Повторне оголошення

const, let - Не підтримують повторне оголошення.

let greeting = 'Hello world!';
let greeting = 'Hello Karl!'; // SyntaxError: Identifier 'greeting' has already been declared

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

var greeting = 'Hello world!';
var greeting = 'Hello Mary!'; // value is 'Hello Mary!' now

Дотримання/ігнорування блочної області видимості

const, let - Дотримуються блокову область видимості.

{
  const constVrb = 1;
  let letVrb = 2;
}

console.log(constVrb); // ReferenceError: constVrb is not defined
console.log(letVrb); // ReferenceError: letVrb is not defined

var - Ігнорує блокову область видимості. Змінні, оголошені в такий спосіб будуть видно поза блоку.

{
  var varVrb = 2;
}

console.log(varVrb); // 2

Hoisting

const, let - Не підтримують hoisting.

letVrb = 2; // ReferenceError: Cannot access 'letVrb' before initialization

let letVrb;

var - Підтримує hoisting. Оголошення змінної піднімається вгору в межах області видимості під час компіляції коду.

varVrb = 3;

var varVrb;