Mi a különbség a var, let és const között?

A var funkcionális hatókörrel rendelkezik, míg a let és const blokk hatókörrel. A var újra deklarálható és újra rendelhető, a let újra rendelhető, de nem deklarálható újra ugyanabban a hatókörben, a const sem deklarálható, sem nem rendelhető újra. A var-ral deklarált változók fel vannak emelve (hoisted) undefined-del, míg a let és const fel vannak emelve, de a "ideiglenes halálzónában" maradnak az inicializálásukig.

// a `var` funkcionális hatókörrel rendelkezik
function exampleVar() {
  if (true) {
    var x = 10;
    console.log(x); // 10
  }
  console.log(x); // 10 (itt látható a x)
}

// a `let` és `const` blokk hatókörrel rendelkezik
function exampleLetConst() {
  if (true) {
    let y = 20;
    const z = 30;
    console.log(y); // 20
    console.log(z); // 30
  }
  // console.log(y); // Hiba ReferenceError: y nincs definiálva
  // console.log(z); // Hiba ReferenceError: z nincs definiálva
}

// a `var` újra deklarálható és újra rendelhető
var a = 1;
var a = 2; // Újra deklarálás
a = 3; // Újrarendelés
console.log(a); // 3

// a `let` újra rendelhető, de nem deklarálható újra ugyanabban a hatókörben
let b = 4;
// let b = 5; // Hiba SyntaxError: Azonosító 'b' már deklarálva
b = 6; // Újrarendelés
console.log(b); // 6

// a `const` nem rendelhető újra vagy deklarálható újra
const c = 7;
// const c = 8; // Hiba SyntaxError: Azonosító 'c' már deklarálva
// c = 9; // Hiba TypeError: Átadás állandó változónak
console.log(c); // 7 (primitív típusokra)

// a felhúzás (hoisting)
console.log(hoistedVar); // undefined (a var felhúzódott és undefined-ként inicializálódott)
var hoistedVar = "Én a var";

// console.log(hoistedLet); // Hiba ReferenceError: Cannot access 'hoistedLet' before initialization
// let hoistedLet = "Én a let"; // Ideiglenes halálzónában van

A fő különbségek összefoglalva a táblázatban:

Jellemző	var	let	const
Hatókör	Funkcionális	Blokk	Blokk
Újra deklarálható	Igen	Nem (azon hatókörben)	Nem
Újra rendelhető	Igen	Igen	Nem (primitív típusokra)
Felhúzás (hoisting)	Igen (undefined-del)	Igen (ideiglenes halálzónában)	Igen (ideiglenes halálzónában)
Kezdeti módosítás	Nem szükséges inicializálás	Nem szükséges inicializálás	Inicializálás szükséges

Fontos megjegyezni, hogy az objektumokra és tömbökre, amelyeket const-tal deklaráltak, maga a változó nem módosítható más objektumra/tömbre, de az objektum vagy tömb tartalma módosítható.

const myObject = { key: 'value' };
// myObject = { newKey: 'newValue' }; // Hiba TypeError: Átadás állandó változónak.
myObject.key = 'newValue'; // Lehetséges
console.log(myObject); // { key: 'newValue' }

const myArray = [1, 2];
// myArray = [3, 4]; // Hiba TypeError: Átadás állandó változónak.
myArray.push(3); // Lehetséges
console.log(myArray); // [ 1, 2, 3 ]