Le basi di JavaScript: VAR vs LET vs CONST

Le basi di JavaScript: VAR vs LET vs CONST

Giuseppe Speranza Di Giuseppe Speranza


javascript hosting frontend

Se non hai mai sentito parlare di Hosting in JavaScript o non conosci nel dettaglio le differenze tra Var, Let o Const ti conviene continuare a leggere. 

In quest’articolo vorrei parlare di una delle domande più frequenti nei colloqui come sviluppatori Frontend. Un argomento tanto semplice quanto di fondamentale importanza nella conoscenza di JavaScript.

Iniziamo!

Introduzione a Var

Dichiarare qualcosa usando Var era l’unico modo possibile prima dell'introduzione di ES6

La sua principale caratteristica la si ritrova nella possibilità’ di poter ridichiarare e aggiornare un valore senza problemi. 

Per entrare nel dettaglio riprendiamo la definizione ufficiale di MDN:

“The var statement declares a function-scoped or globally-scoped variable, optionally initializing it to a value.” 

Il function-scoped o scope interno della funzione, si riferisce al fatto che JavaScript crea un nuovo scope ogni qualvolta si crea una funzione. In parole povere ogni cosa dichiarata dentro una funzione non è accessibile dall’esterno.

Esempio:

Se invece di dichiarare la variabile dentro la funzione, l’avessimo fatto globalmente, ossia all’esterno del blocco, si sarebbe parlato di globally-scoped o scope globale. Essere accessibile globalmente significa poter essere letti e modificati in qualsiasi punto dello script.    

Come potete vedere all’interno della funzione é stato possibile ridichiarare la stessa variabile, senza incorrere in nessun errore. Proprio perché Var é gestita con il function-scope e quindi lo scope della funzione é separato ed indipendente!

Un’altra caratteristica fondamentale é che tutto ciò che viene dichiarato con Var, viene gestito con un processo che prende il nome di Hoisting.

Un processo di fondamentale importanza che non tutti gli sviluppatori JavaScript alle prime armi conoscono e che, purtroppo, ha portato (insieme ad altre caratteristiche intrinseche del linguaggio) ad aumentare l’astio verso questo linguaggio; specialmente tra chi proviene da un linguaggio Server side.

In poche parole L’interprete di JavaScript non fa altro che portare al top dello script tutto quello che trova dichiarato con Var. Quindi prima ancora di eseguire qualcosa, l’interprete legge lo script, cerca Var e trasferisce solo la dichiarazione e non l’inizializzazione della variabile. Cosa vuol dire?

Prendiamo il seguente esempio:

Il valore di default é sempre undefined come potete vedere nella riga 1; l’inizializzazione avviene poi alla riga 3 ed infatti il log della riga 4 stampa correttamente il valore.

Un’ultima chicca, tutto quello che viene dichiarato globalmente in JavaScript viene automaticamente aggiunto come proprietà dell’oggetto window.

Esempio:

Introduzione a Let e Const

Finora abbiamo parlato di scope globale e funzionale, cioè del corpo di una funzione. 

Secondo voi cosa stamperà il seguente esempio? 

 

Attenzione a non confondere il function-scope con il block scope.

La soluzione é questa: 

La variabile anniTotali sarà accessibile esternamente perché é block scoped, ossia fa parte di uno scope delimitato da delle parentesi graffe e non da una funzione! 

È proprio per questo motivo che sono stati introdotti Let e Const.

Quindi quali sono i loro benefici? 

Come ho appena detto Let e Const sono block-scoped, ma cosa é un blocco? Un blocco é semplicemente un set di parentesi graffe aperte e chiuse. 

Riprendiamo l’esempio di prima usando Let per dichiarare ed inizializzare anniTotali 

Ora infatti la variabile anniTotali genera un'eccezione in quanto risulta non definita.

L’esempio di sopra può interscambiare tranquillamente Let con Const, generando la stessa eccezione:

Const, proprio come Let, é anch’essa block-scoped. 

La differenza tra Let e Const  é che una variabile definita con Const non può essere riassegnata o dichiarata nuovamente.

Riprendendo la definizione ufficiale di MDN:

“Constants are block-scoped, much like variables declared using the let keyword. The value of a constant can't be changed through reassignment, and it can't be redeclared.” 

Il seguente esempio chiarirà ogni dubbio:

Const crea letteralmente una costante, quindi un valore che non deve cambiare nel tempo. Immaginiamo di trovarci in un progetto molto grande, in cui ci sono alcuni valori, come ad esempio delle variabili di ambiente, il basepath dei servizi REST o altre costanti come delle funzioni di utilità generale, che devono essere uguali per tutto il progetto; inoltre normalmente le costanti sono sempre dichiarate in uppercase, quindi tutto in maiuscolo.

Prima dell’introduzione di Const, si poteva avere un risultato simile definendo una proprietà globale usando i metodi nativi degli oggetti di JavaScript, come Object.defineProperty.

Un esempio completo:

senza entrare troppo nel dettaglio di questa implementazione, il metodo Set si occupa semplicemente di valorizzare una proprietà.

Il metodo Get invece restituisce il valore esistente... Tutto questo codice, dopo l’introduzione di ES6, viene sostituito con un semplice Const.

A questo punto verrebbe da dire che sia Let che Const non siano soggette all’Hoisting, come si potrebbe evincere dal seguente esempio dove proviamo a loggare a riga 5 la variabile definita con Let ottenendo quell’eccezione.

tuttavia non é proprio così...

L’interprete conosce tutte le variabili, anche quelle dichiarate con Const e Let, ma non permette l’accesso al loro valore prima della loro definizione. 

Questa zona viene chiamata in gergo tecnico Temporal Dead Zone.

Per provare quello che sto dicendo basta guardare il seguente esempio:

se la variabile prova non fosse soggetta all’hoisting avremmo avuto come risultato Undefined come a riga 1 dove proviamo a loggare una variabile mai definita.

Breve Recap generale:

Var:

  • scope funzionale (function scoped) oppure scope globale (globally-scoped);
  • Valore di default undefined;
  • Valori duplicati o dichiarazioni nuove identiche non generano errori;
  • soggette all’Hoisting e inizializzate con undefined.

Let:

  • Block scoped, la loro esistenza é limitata all’interno del blocco in cui sono dichiarate, il blocco é delimitato dalle parentesi graffe (ad esempio un loop, un if-else etc..);
  • accedere al loro valore prima della dichiarazione provoca un errore;
  • variabili duplicate nello stesso blocco generano errore;
  • non sono mai aggiunte come proprietà globali all’oggetto window.

Const:

  • Block scoped;
  • accedere al loro valore prima della dichiarazione provoca un errore;
  • variabili duplicate nello stesso blocco generano errore;
  • non possono essere dichiarate nuovamente;
  • non sono mai aggiunte come proprietà globali all’oggetto window.

Considerazione personale: L’introduzione di ES6 é un’aggiunta migliorativa del mondo JavaScript. L’utilizzo di Let e Const può solo spronare il programmatore ad evitare possibili errori più o meno gravi che potrebbero verificarsi. 

Anche in fase di debugging, invece di avere valori anonimi come undefined, ci viene fornito un messaggio molto più dettagliato, ossia: “ReferenceError: x is not defined”.

Sicuramente molti programmatori old school o molti junior che si stanno affacciando al mondo JavaScript, preferiscono l’utilizzo di Var per la sua semplicità o perché non sanno nel dettaglio le sue differenze con Let e const.

Oggigiorno usare Let e Const é lo standard, e poi perché non sceglierlo se a fronte di una piccola modifica il codice migliora notevolmente? 

Grazie a tutti per lettura!

Impara a programmare in 3 mesi con il Corso di Coding Hackademy su Laravel PHP

Diventa Sviluppatore web in 3 mesi

Scopri il coding bootcamp Hackademy

Programma Completo