Ποια είναι η διαφορά μεταξύ var, let και const;

Το var έχει λειτουργική εμβέλεια, ενώ τα let και const έχουν μπλοκ εμβέλεια. Το var μπορεί να δηλωθεί ξανά και να ανατεθεί, το let μπορεί να ανατεθεί ξανά αλλά όχι να δηλωθεί ξανά στην ίδια εμβέλεια, το const δεν μπορεί ούτε να δηλωθεί ούτε να ανατεθεί. Οι μεταβλητές που δηλώνονται με var υπόκεινται σε ανύψωση (hoisting) με αρχικοποίηση το undefined, ενώ οι let και const υπόκεινται σε ανύψωση αλλά παραμένουν στη "χρονική ζώνη θανάτου" μέχρι να αρχικοποιηθούν.

// το `var` έχει λειτουργική εμβέλεια
function exampleVar() {
  if (true) {
    var x = 10;
    console.log(x); // 10
  }
  console.log(x); // 10 (το x φαίνεται εδώ)
}

// τα `let` και `const` έχουν μπλοκ εμβέλεια
function exampleLetConst() {
  if (true) {
    let y = 20;
    const z = 30;
    console.log(y); // 20
    console.log(z); // 30
  }
  // console.log(y); // Σφάλμα ReferenceError: y is not defined
  // console.log(z); // Σφάλμα ReferenceError: z is not defined
}

// το `var` μπορεί να ανατεθεί ξανά και να δηλωθεί ξανά
var a = 1;
var a = 2; // Δήλωση ξανά
a = 3; // Αναθέση
console.log(a); // 3

// το `let` μπορεί να ανατεθεί ξανά, αλλά όχι να δηλωθεί ξανά στην ίδια εμβέλεια
let b = 4;
// let b = 5; // Σφάλμα SyntaxError: Identifier 'b' has ήδη δηλωθεί
b = 6; // Αναθέση
console.log(b); // 6

// το `const` δεν μπορεί να ανατεθεί ή να δηλωθεί ξανά
const c = 7;
// const c = 8; // Σφάλμα SyntaxError: Identifier 'c' έχει ήδη δηλωθεί
// c = 9; // Σφάλμα TypeError: Ανάθεση σε σταθερή μεταβλητή.
console.log(c); // 7 (για πρωταρχικούς τύπους)

// ανύψωση (hoisting)
console.log(hoistedVar); // undefined (το var ανυψώθηκε και αρχικοποιήθηκε με undefined)
var hoistedVar = "Εγώ το var";

// console.log(hoistedLet); // Σφάλμα ReferenceError: Cannot access 'hoistedLet' πριν την αρχικοποίηση
// let hoistedLet = "Εγώ το let"; // Βρίσκεται στη χρονική ζώνη θανάτου

Οι βασικές διαφορές συνοψίζονται στον πίνακα:

Χαρακτηριστικό	var	let	const
Εμβέλεια	Λειτουργική	Μπλοκ	Μπλοκ
Δήλωση ξανά	Ναι	Όχι (στην ίδια εμβέλεια)	Όχι
Αναθέση	Ναι	Ναι	Όχι (για πρωταρχικούς τύπους)
Ανύψωση (hoisting)	Ναι (με undefined)	Ναι (στην χρονική ζώνη θανάτου)	Ναι (στην χρονική ζώνη θανάτου)
Αρχική μετατροπή	Δεν απαιτείται αρχικοποίηση	Δεν απαιτείται αρχικοποίηση	Απαιτείται αρχικοποίηση

Είναι σημαντικό να σημειωθεί ότι για αντικείμενα και πίνακες που δηλώνονται με const, η ίδια η μεταβλητή δεν μπορεί να ανατεθεί σε άλλο αντικείμενο/πίνακα, αλλά το περιεχόμενο του αντικειμένου/πίνακα μπορεί να τροποποιηθεί.

const myObject = { key: 'value' };
// myObject = { newKey: 'newValue' }; // Σφάλμα TypeError: Ανάθεση σε σταθερή μεταβλητή.
myObject.key = 'newValue'; // Είναι δυνατό
console.log(myObject); // { key: 'newValue' }

const myArray = [1, 2];
// myArray = [3, 4]; // Σφάλμα TypeError: Ανάθεση σε σταθερή μεταβλητή.
myArray.push(3); // Είναι δυνατό
console.log(myArray); // [ 1, 2, 3 ]