var vs let vs const în JavaScript

În JavaScript există 3 moduri de a declara o variabilă și sunt sigur că cei care nu obișnuiesc să scrie cod de JavaScript în mod frecvent, sau nu sunt la curent cu ultimele schimbări ale limbajului, au nelămuriri la vederea (mai) noilor keywords: let și const. Mai ales că var e un keyword întâlnit și prin alte limbaje de programare.

Deci să recapitulăm, spuneam că avem 3 moduri, sau mai precis 3 cuvinte cheie: var (cel mai vechi), let și const.

Pe la începuturile web-ului, în JavaScript exista doar un mod de a declara o variabilă, folosind var , dar avea anumite probleme și limitări.

Problemele lui var

Una din principalele probleme ale lui var este faptul că are function scope.

Acum dacă termenul de “scope” nu-ți este familiar, ei bine “scope” reprezintă disponibilitatea unei variabile sau funcții la a fi folosită.

Asta înseamnă că o variabilă o dată declarată cu var , este disponibilă pentru a fi folosită pe întregul spectru al funcției respective.

În cazul în care variabila nu e declarată în interiorul unei funcții, ea este disponibilă global pentru întreg window , în cazul în care vorbim de client side JavaScript.

În același timp, o variabilă de tip var poate fi redeclarată, astfel codul următor devine cod valid.

var name = "Bogdan";
var age = 19;

if (age > 18) {
  var name = "Alex";
}

console.log(name); //Alex

Da, codul de mai sus se va executa fără nicio eroare și probabil intuiești că situația asta ar putea duce la probleme destul de dificil de detectat și rezolvat într-o bază de cod mai mare.

Un alt aspect e faptul că var este hoisted.

Hoisting-ul e un mecanism din JavaScript care “mută” declararea variabilelor și funcțiilor la începutul scope-ului înainte de execuția codului.

Asta înseamnă că următorul cod:

console.log(name);
var name = "Bogdan";

Este defapt interpretat astfel:

var name;
console.log(name); //undefined
name = "Bogdan";

Avantajele lui let

let rezolvă toate problemele pe care tocmai le-am discutat mai sus.

Contrar lui var ,let este block scoped, în loc de function scoped, astfel că în situația de mai jos, valoarea printată va fi undefined.

function whatsMyName() {
  const age = 19;
  if (age > 18) {
    let name = "Bogdan";
    console.log(name); //Bogdan
  }
  console.log(name); //undefined
}

let poate fi modificat, dar nu poate fi redeclarat. Astfel că următorul cod este invalid:

let name = "Bogdan";
name = "Alex"; //ok

let name = "Alex"; //eroare: name a fost deja declarat

În ceea ce privește hoisting-ul, let este deasemenea hoisted, dar față de var nu este și inițializat. În timp ce var este inițializat ca undefined în momentul în care este hoisted, let e lăsat complet neinițializat, iar accesarea lui înainte de inițializare, adică de atribuirea unei valori, va rezulta într-o eroare.

console.log(firstName); //undefined
console.log(lastName); //eroare

var firstName = "Ion";
let lastName = "Popescu";

Când folosim const

Se folosește pentru reprezentarea constantelor în cod. Prin definiție, o constantă nu își poate schimba niciodată valoarea.

const e extrem de similar, ba chiar putem spune că moștenește toate capabilitățile lui let , poartă în schimb diferența că în momentul declarării trebuie neapărat să-i fie atribuită o valoare și în felul ăsta să fie inițializată. Deasemenea, o dată atribuită o valoare, ea nu mai poate fi schimbată.

const age; //eroare, trebuie inițializată

const age = 20;

age = 30; //eroare, valoarea unei constante nu poate fi schimbată.

În cazul obiectelor, valorile proprietăților pot fi schimbate:

const car = {
  brand: "BMW",
  model: "3 series",
};

car.model = "5 series";

Concluzie

Ca o încheiere, hai să recapitulăm aspectele de mai sus în căteva fraze:

• Nu mai folosi niciodată var în JavaScript, decât în cazuri foarte specifice, dar fii conștient de problemele pe care le aduce
• Folosește tot timpul let pentru variabilele a căror referință e nevoie să fie schimbată
• Folosește tot timpul const pentru toate variabilele a căror valoare va fi constantă