Variabili JavaScript

Introduzione

Una variabile è un contenitore con un nome che racchiude un valore. In JavaScript si creano variabili per memorizzare dati — il nome di un utente, un totale parziale, il risultato di un calcolo — e poi si fa riferimento a quei dati tramite il nome nelle parti successive del programma.

Questa guida copre tutto ciò che serve per dichiarare variabili con sicurezza: le tre parole chiave (let, const e il più vecchio var), come lo scope determina dove una variabile è visibile, cosa significano in pratica l'hoisting e la Temporal Dead Zone (TDZ), la differenza tra riassegnazione e mutazione di una const, e le regole di denominazione e le convenzioni seguite dalla comunità.

In breve: usa const per impostazione predefinita, let quando hai bisogno di riassegnare, ed evita var nel codice moderno.

Dichiarare una Variabile

Si dichiara una variabile con una parola chiave seguita da un nome, e facoltativamente si assegna un valore con =:

JavaScript è tipizzato dinamicamente: una variabile non ha un tipo fisso, quindi la stessa variabile può contenere una string in un momento e un numero in un altro. (Consulta JavaScript Data Types per i valori che le variabili possono contenere.)

Esistono tre parole chiave per la dichiarazione:

• const — per valori che non verranno riassegnati (la scelta predefinita).
• let — per valori che verranno riassegnati.
• var — la parola chiave originale, mantenuta per compatibilità con il passato. Vedi Il vecchio "var".

Confronto tra let, const e var

L'esempio seguente mostra le differenze pratiche tra let/const con scope di blocco e var con scope di funzione:

Scope: Dove Vive una Variabile

Lo scope determina in quale parte del codice una variabile è accessibile. Per un approfondimento, consulta Scope delle variabili, closure.

Scope di Blocco (let e const)

let e const sono visibili solo all'interno del blocco { ... } in cui sono dichiarate — un if, un ciclo o qualsiasi coppia di parentesi graffe:

Ecco perché let è la scelta giusta per i contatori di ciclo: ogni iterazione di un ciclo for ottiene il proprio binding.

Scope di Funzione (var)

var ignora i blocchi. Ha come scope la funzione più vicina che la racchiude (o lo scope globale se si trova fuori da qualsiasi funzione), il che è una fonte comune di bug:

Scope Globale

Una variabile dichiarata al di fuori di qualsiasi funzione è globale e accessibile ovunque. Nei browser, una var di primo livello si associa all'object globale window, mentre let e const di primo livello hanno scope di script e non lo fanno:

Hoisting e la Temporal Dead Zone

Il termine hoisting significa che le dichiarazioni vengono elaborate prima dell'esecuzione del codice. Le tre parole chiave si comportano in modo diverso rispetto all'hoisting.

Una dichiarazione var viene hoisted e inizializzata a undefined, quindi leggere la variabile prima della riga che la assegna restituisce undefined anziché un errore:

let e const vengono anch'esse hoisted, ma non vengono inizializzate. Dall'inizio del blocco fino alla riga della dichiarazione, la variabile si trova nella Temporal Dead Zone (TDZ) — accedervi genera un ReferenceError:

La TDZ è una funzionalità, non una stranezza: rileva l'uso accidentale prima della dichiarazione che var nasconde silenziosamente.

const: Riassegnazione vs. Mutazione

const impedisce la riassegnazione della variabile — non si può far puntare il nome a un nuovo valore. Questo però non rende immutabile il valore stesso. Gli object e gli array contenuti in una const possono essere comunque modificati:

Usa const per object e array ogni volta che non riassegni il binding — documenta l'intenzione e previene un'intera classe di bug. Se hai davvero bisogno di un object immutabile, usa Object.freeze().

Regole e Convenzioni di Denominazione

JavaScript applica alcune regole rigide per i nomi delle variabili:

• I nomi possono contenere lettere, cifre, _ (underscore) e $ (segno del dollaro).
• I nomi non devono iniziare con una cifra.
• I nomi sono case-sensitive — total e Total sono variabili diverse.
• Le parole chiave riservate come let, class o return non possono essere usate.
• Gli spazi non sono consentiti.

Oltre alle regole, segui queste convenzioni per scrivere codice leggibile:

• Usa nomi descrittivi: userAge, non x.
• Usa il camelCase per variabili e funzioni: firstName, itemCount.
• Usa UPPER_SNAKE_CASE per le costanti fisse: const MAX_SIZE = 100;.
• Evita le singole lettere, eccetto per i contatori di ciclo di breve durata (i, j).

Riepilogo

• Usa const per impostazione predefinita, let quando hai bisogno di riassegnare, ed evita var nel nuovo codice.
• let e const hanno scope di blocco; var ha scope di funzione e fuoriesce dai blocchi.
• let/const si trovano nella TDZ prima della loro dichiarazione; var viene letto come undefined.
• const blocca la riassegnazione, non la mutazione — il contenuto di object e array può comunque cambiare.
• Segui le regole di denominazione (nessuna cifra iniziale, nessuna parola chiave, case-sensitive) e usa il camelCase.

Per approfondire, leggi Il vecchio "var" e Scope delle variabili, closure.

Esercitazione