Care este diferența dintre var, let și const?

var heeft een functioneel bereik, terwijl let en const een blokbereik hebben. var kan opnieuw gedeclareerd en herhaald worden, let kan herhaald worden maar niet opnieuw gedeclareerd in hetzelfde bereik, en const kan niet herhaald of herhaald worden. Variabelen gedeclareerd met var worden gehoogd (hoisting) met een initiële waarde van undefined, terwijl let en const ook gehoogd worden maar in de "tijdelijke dode zone" totdat ze geïnitialiseerd worden.

// var heeft een functioneel bereik
function voorbeeldVar() {
  if (true) {
    var x = 10;
    console.log(x); // 10
  }
  console.log(x); // 10 (x is hier zichtbaar)
}

// let en const hebben een blokbereik
function voorbeeldLetConst() {
  if (true) {
    let y = 20;
    const z = 30;
    console.log(y); // 20
    console.log(z); // 30
  }
  // console.log(y); // Fout ReferenceError: y is niet gedefinieerd
  // console.log(z); // Fout ReferenceError: z is niet gedefinieerd
}

// var kan opnieuw gedeclareerd en herhaald worden
var a = 1;
var a = 2; // Herdeclaratie
a = 3; // Herinitialisatie
console.log(a); // 3

// let kan herhaald worden maar niet opnieuw gedeclareerd in hetzelfde bereik
let b = 4;
// let b = 5; // Fout SyntaxError: identificatie 'b' is al gedeclareerd
b = 6; // Herinitialisatie
console.log(b); // 6

// const kan niet herhaald of hergebruikt worden
const c = 7;
// const c = 8; // Fout SyntaxError: identificatie 'c' is al gedeclareerd
// c = 9; // Fout TypeError: Toewijzing aan constante variabele
console.log(c); // 7 (voor primitieve types)

// Hoisting
console.log(hoistedVar); // undefined (var is gehoogd en geïnitialiseerd met undefined)
var hoistedVar = "Ik ben var";

// console.log(hoistedLet); // Fout ReferenceError: Kan niet toegang krijgen tot 'hoistedLet' vóór initialisatie
// let hoistedLet = "Ik ben let"; // In de tijdelijke dode zone

De belangrijkste verschillen worden samengevat in de tabel:

Eigenschap	var	let	const
Bereik	Functioneel	Blok	Blok
Herdeclaratie	Ja	Nee (in hetzelfde bereik)	Nee
Herinitialisatie	Ja	Ja	Nee (voor primitieve types)
Hoisting	Ja (met undefined)	Ja (in de tijdelijke dode zone)	Ja (in de tijdelijke dode zone)
Vroege initialisatie	Vereist geen initialisatie	Vereist geen initialisatie	Vereist initialisatie

Het is belangrijk op te merken dat voor objecten en arrays gedeclareerd met const, de variabele zelf niet kan worden hergebruikt voor een ander object/array, maar de inhoud van het object/de array kan worden gewijzigd.

const mijnObject = { key: 'value' };
// mijnObject = { nieuweKey: 'nieuweWaarde' }; // Fout TypeError: Toewijzing aan constante variabele
mijnObject.key = 'nieuweWaarde'; // Mogelijk
console.log(mijnObject); // { key: 'nieuweWaarde' }

const mijnArray = [1, 2];
// mijnArray = [3, 4]; // Fout TypeError: Toewijzing aan constante variabele
mijnArray.push(3); // Mogelijk
console.log(mijnArray); // [ 1, 2, 3 ]