Costanti e Variabili in JavaScript

Nel mio ultimo video, disponibile sul mio canale YouTube, ho parlato dello scope delle variabili, introducendo concetti come scope globale, locale e di blocco. In questo articolo facciamo un piccolo passo indietro e parliamo delle variabili. In questo post cerchiamo di capire cosa sono esattamente? Come funzionano? e perché dire che una variabile è un contenitore è un affermazione sbagliata.

Cosa sono le variabili

Molte volte nei corsi di programmazione e anche a scuola (a me è stato insegnato così), per far digerire meglio il concetto, la variabile viene definita come un contenitore che permette di "portare in giro" per il programma un valore e di poterlo usare quando necessario. Oppure, viene spesso detto che le variabili sono valori.

In realtà non è esattamente così.

Le variabili sono da considerare più come dei fili che come dei contenitori. Ad esempio, posso puntare la variabile animale al valore "Ghepardo". (Posso anche dire che sto assegnando il valore "Ghepardo" alla variabile chiamata animale):

1let animale = "Ghepardo";

E se volessi un animale diverso? No c'è problema, possiamo riassegnare il valore alla variabile animale come segue:

1animale = "Grifone";

In questo modo non stiamo facendo altro che istruire JavaScript nel "scollegarsi" dal valore precedente e puntare ad uno nuovo. A sinistra dell'uguale (animale) c'è il nome e a destra dell'uguale il valore ("Grifone"). In questo modo la variabile animale continuerà a puntare al valore fintanto che non verrà riassegnata nuovamente.

Regole di assegnazione

Ci sono chiaramente delle regole di sintassi da rispettare in fase di assegnazione, nello specifico:

1. A sinistra dell'uguale deve esserci un "filo", come ad esempio animale.

11993 = "data di nascita" // Assolutamente no
2'hello' = 'there' // No

1. La parte destra dell'assegnazione deve essere un espressione, così da risultare sempre in un valore.

1animale = "La carica dei " + count;

Nell'esempio, l'espressione a destra dell'uguale risulterà in una stringa (per esempio "La carica dei 101"). Da adesso animale sarà collegata a questo particolare valore.

In breve

Le variabili sono collegamenti, il nome della variabile punta ad uno specifico slot della memoria del nostro computer e ogni qualvolta che riassegniamo una variabile non facciamo altro che puntare il nostro collegamento verso un nuovo valore in memoria.

La memoria (la RAM) dovete immaginarla con un palazzo (molto alto), dove ogni appartamento è uno slot dove i vari programmi in esecuzione sul nostro PC inseriscono valori che gli serviranno in un secondo momento per poter funzionare correttamente. Quando noi facciamo un assegnazione ci riserviamo uno di questi slot e quando riassegniamo andiamo a riempire un nuovo slot. Il nome che usiamo sarà il nome che daremo a quel particolare slot per poterlo leggere. Già... ma come si legge il valore di una variabile? Lo vediamo subito

Leggere il valore di una variabile

Per leggere il valore collegato ad una variabile basta chiamarla per nome.

1console.log(animale);

console.log() mostrerà nella console del browser il valore della variabile che gli abbiamo passato, il quale, in base ai nostri esempi fatti in precedenza, dovrebbe essere "La carica dei 101".

Le costanti

Quanto hai letto fino ad ora si applica tranquillamente anche alle costanti ad esclusione di una cosa. Una costante non può essere riassegnata. Ciò significa che una volta dichiarata non può cambiare di valore, non si chiama costante mica a caso.

1let x = 10;
2const y = 20;
3
4x = 30; // Yes
5y = 40; // Nope

Se dovessimo eseguire il codice qui sopra il browser ci risponderà con un bel TypeError: Assignment to constant variabile.. Come dargli torto, gli abbiamo detto che y è una costante e cerchiamo di riassegnarla.

Quando usare le costanti e quando le variabili

Domanda che viene posta spesso e alla quale solitamente rispondo come segue: se il valore non cambia mai nel corso del tuo programma è una costante, altrimenti è una variabile. Semplice no?

Come chiamare una variabile o una costante

Il nome di una variabile e di una costante deve essere sempre comprensibile o per lo meno il più possibile. Se ad una costante assegni l'URL di una risorsa JSON da recuperare non chiamarla x, piuttosto chiamala endpoint o urlRisorsa. Oppure, osserva questi due esempi:

1// A colpo d'occhio questo codice non dice nulla
2const b = 4;
3const h = 10;
4const d = Math.sqrt(l ** 2 + w ** 2);
5
6// Questo è molto più chiaro
7const base = 4;
8const altezza = 10;
9const diagonale = Math.sqrt(base ** 2 + altezza ** 2);

Inoltre, ricorda sempre che i nomi delle variabili e delle costanti devono rispettare questi quattro semplici punti:

• Non devono avere spazi
• Possono contenere solo lettere, numeri e underscore (il meno - viene considerato come sottrazione)
• Non devono avere numeri all'inizio
• Non possono essere usate parole riservate (const, let, this, function, class, var, ecc.)