So che l’argomento è trito e ritrito ma oggi qualcuno ancora fa confusione: che differenza c’è tra dichiarare una variabile con Let e dichiararla con Var?

Come sappiamo in Javascript utilizzare una variabile senza dichiararla equivale a dichiararla globale e, come scrive Douglas Crockford nel suo Javascript the good parts:

forgetting to declare a variable is a very common mistake

Quindi è igienico dichiarare le variabili, se desideriamo che una variabile sia globale è sufficiente dichiararla fuori da qualunque funzione, se invece la dichiariamo nel corpo della funzione lo scope sarà locale.

Dichiarare una variabile con LET o VAR  non è esattamente la stessa cosa:

Dichiarare una variabile locale ad una funzione ha un significato diverso in base al token utilizzato: con VAR la variabile avrà scope di funzione e sarà utilizzabile (nel corpo della funzione) anche nelle righe che precedono la dichiarazione stessa (hoisting),infine una variabile dichiarata con VAR può essere ri-dichiarata.

Se invece utilizzo LET lo scope sarà limitato al blocco, cioè un insieme di righe delimitate da {}, all’interno del quale ho effettuato la dichiarazione e inoltre questa variabile sarà soggetta all’hoisting in modo differente da quella dichiarata con VAR,  se dichiaro in un blocco una variabile usando LET e cerco di utilizzarla (nello stesso blocco) prima della dichiarazione questa risulterà non inizializzata (quindi non potrà essere utilizzata solo dopo la sua assegnazione, diversamente otterremo un Reference Error ), invece le variabili dichiarate con VAR risultano inizializzate con il valore undefined.

Inoltre un variabile dichiarata con LET può essere ri-assegnata ma non ri-dichiarata, chiaramente non all’interno dello stesso scope poichè in uno scope differente sarà di fatto una differente variabile.

E Const?
Const serve a dichiarare una costante, cioè una variabile che non può essere riassegnata. Lo scope è limitato al blocco e vale l’hoisting.

 

L’esempio che segue è tratto dal javascript reference manual su developer.mozilla.org:

function varTest() {   
var x = 31;   
if (true) {     
  var x = 71;  // same variable!       console.log(x);  // 71   
}   
console.log(x);  // 71 
} 

function letTest() {   let x = 31;   
  if (true) {     
    let x = 71;  // different variable                       console.log(x);  // 71   
  }   
  console.log(x);  // 31 
}