Come praticamente in tutti i linguaggi di programmazione, anche in JavaScript una variabile è una "scatola" alla quale diamo un nome e associamo un valore, come un numero o un testo, per memorizzarlo ed utilizzarlo durante l'esecuzione del codice.

La classica parola chiave con cui dichiarare una variabile è var. Esistono altre modalità che ti illustrerò in questo video insieme alla loro finalità. Quello che però andrò a mostrarti, in ottica di Programmazione Rapida Semplificata, è come puoi ottenere gli stessi risultati utilizzandone un solo tipo. Questo agevolerà la tua scrittura di codice liberandoti da pensieri e dal rischio di generare incongruenze, permettendoti di focalizzarti solo su quello che effettivamente vuoi realizzare.

Vediamo intanto le regole universali legate al nome che puoi dare ad una variabile…

GUARDA IL VIDEO:

Cosa mostro nel video:

La dichiarazione classica di una variabile è composta dalla parola parola chiave var seguita dal nome che si vuole assegnare ad una variabile, per valorizzarla sarà a sua volta seguita dal simbolo dell’= e dal valore che vogliamo che contenga.

Il nome della variabile ha alcune restrizioni, ovvero non può corrispondere ad una parole chiave del linguaggio (quindi non posso chiamare una variabile ad esempio var oppure for, function o if poiché sono istruzioni vere e proprie di JavaScript e il sistema non sarebbe in grado di interpretarle come desiderato). Ho inserito questi valori tra i commenti altrimenti l’editor non mi avrebbe permesso di salvare il foglio riconoscendo immediatamente l’errore, infatti liberando queste righe dai commenti compaiono subito gli elementi di segnalazione di incongruenze, e provando a salvare viene prontamente restituito un messaggio di errore di sintassi.

Il nome di una variabile non può iniziare con un numero, può invece contenerlo o terminare con un valore numerico. Liberando queste righe dai commenti viene segnalato come errore solo il primo caso.

Ci sono tutta una serie di caratteri vietati, quali ad esempio il simbolo meno, punto, punto interrogativo, la percentuale, i due punti, lo spazio. È invece consentito il dollaro e l’underscore.

Il punto e virgola non genera errore se utilizzato all’interno del nome tuttavia, come abbiamo visto nella precedente lezione legata alla sintassi e best practice, indica il termine dell’istruzione. Pertanto in questo esempio quello che succede, nel primo caso, non è definire una variabile che si chiama test2;test2 bensì sto definendo una variabile vuota che si chiama test2 e poi valorizzo la variabile test2 con questa stringa. Il secondo caso chiarisce meglio il concetto, non sto dichiarando una variabile con nome test3;test4, bensì sto dichiarando una variabile test3 che non avrà valore e subito dopo dichiaro una variabile che si chiama test4 alla quale assegno invece un valore. Questo succede sia perché con il punto e virgola possiamo scrivere istruzioni diverse sulla stessa riga (vedere esempi sulla minificazione nella lezione precedente) sia perché posso dichiarare variabili anche senza la parola chiave var (lo vedremo tra poco in questo video).

Per completezza ricordo che il JavaScript è case sensitive, pertanto dichiarare una variabile con mytest e un’altra con myTest (con la T maiuscola) significa aver dichiarato due variabili completamente distinte. Il log conferma conferma quanto appena detto.

Le variabili possono essere dichiarate in modi diversi: liberamente, ovvero senza definire alcuna parola chiave oppure con var (come abbiamo visto), con const o con let.

In tutti i casi la modalità con cui si dichiara una variabile ne definisce l’ambito. Ovvero se è una variabile globale, definita fuori dalle funzioni e dove il suo valore può essere modificato e recuperato fuori e dentro le altre funzioni, oppure locale, che esiste solo all’interno della funzione dove è stata definita e non può essere richiamata da fuori o all’interno di un’altra funzione.

Conoscere gli ambiti aiuta ad evitare incongruenze all'interno del proprio codice quando viene eseguito.

Ti mostro a cosa mi sto riferendo e ne approfitto per spiegare rapidamente, a scopo informativo, la differenza tra questi tipi di dichiarazione. Può sempre esserti utile nel caso tu dovessi leggere codice di altri che le contengono. In ogni caso ti ricordo che non ne avrai bisogno per i tuoi sviluppi, perché possiamo gestire tutto senza const e let, basterà solo saper dichiarare bene le variabili con e senza var.

La differenza principale tra var e let è l’ambito a livello di blocco (detto ‘block scope’). Per blocco si definisce un’istruzione racchiusa tra parentesi graffe, come può essere una condizione all’interno di una funzione.

var non ha il block scope mentre let sì. Cosa significa… In questo primo esempio ho una funzione con all’interno una variabile dichiarata con var che ho chiamato myvar1 con valore 1, all'interno del blocco di codice if ho dichiarato nuovamente la mia variabile myvar1 con var assegnandole un valore diverso, nel caso specifico 2. Uscito dal blocco, se stampo il valore di myvar1 eseguendo la funzione, il risultato sarà 2. Perché la seconda dichiarazione sovrascriverà la prima dal momento che entrambe le variabili hanno lo stesso nome e si trovano all’interno della stessa funzione, per cui vengono interpretate dal sistema come se fossero la stessa variabile.

Nel secondo esempio invece, utilizzo let all’interno del blocco di codice per definire una variabile che ha lo stesso nome di quella che ho dichiarato subito prima di tale blocco. Dal momento che let ha ambito di blocco, questa variabile esisterà solo all’interno della condizione, infatti uscito dal blocco, se stampo il valore di myvar2 eseguendo la funzione, il risultato in questo caso sarà 1, ovvero il valore assegnato inizialmente alla variabile prima del blocco tra parentesi graffe.

Quindi ricapitolando, prima del blocco di codice dichiaro una variabile che chiamo miavariabile1 e che contiene una stringa, dentro il blocco ho bisogno di un’altra variabile di tipo boolean che può essere true o false, non ha niente a che vedere con la precedente, ma per creare un po’ di confusione nel mio codice chiamo anche questa, miavariabile1. Subito fuori dal blocco mi serve una variabile per contenere un oggetto… come potrei chiamarla… fammi pensare… ma sì, complichiamoci la vita, la chiamerò miavariabile1...

Ma perché?!!

Infatti… la domanda che può sorgere spontanea a questo punto è… perché complicarsi la vita chiamando con lo stesso nome variabili che non hanno niente da condividere tra loro?! Se te lo stai chiedendo anche te direi che abbiamo trovato la prima semplificazione ovvero, chiama con nome diverso variabili che hanno diversa finalità all’interno del tuo codice, in questo modo elimini i conflitti di ambito per quelle variabili, che non rappresentano la stessa scatola. Non hai bisogno di let e puoi utilizzare tranquillamente il var.

L'altro tipo di dichiarazione è const. Queste variabili si comportano in maniera simile a quelle dichiarate con let, ma non possono essere riassegnate. CONST infatti sta per costante, quindi il suo valore non può cambiare. Ci possono essere infatti alcuni valori fissi che definiamo in variabili utilizzate poi in vari punti del codice. Nel caso dell’esempio ho dichiarato come const il valore del pigreco. Se provo a riassegnarlo viene generato un errore perché, appunto, sto tentando di modificare il valore di una costante. Questa dichiarazione pertanto elimina completamente la possibilità di sovrascrivere le variabili che vogliamo non vengano toccate.

Anche in questo caso una domanda può sorgere spontanea… perché mai dovrei modificare il valore di una variabile che non voglio che venga modificata?! Posso tranquillamente dichiararla con var e utilizzarla con criterio all’interno del codice.

A maggior ragione che, nonostante le variabili const non possono essere riassegnate, se queste contengono un array o un oggetto (come nel caso di questo esempio), posso modificare il valore di un elemento al suo interno e non riceverò alcun errore.

Ah… quindi se questa variabile la dichiaro con const e ci metto dentro dentro un oggetto che chiamo ‘omino della lego con i capelli corti’, io non posso assegnare a questa variabile un omino della lego diverso, però per vie traverse posso cambiargli ad esempio i capelli. Sì in effetti… costante o_O

Da qui possiamo tirare fuori due regole per programmare in modo semplificato senza complicarsi troppo la vita:

• Usa sempre var per inizializzare una variabile

• Usa nomi diversi per variabili che hanno diverse finalità

Assodato questo rimane il concetto di variabile globale e variabile locale (fuori e dentro le funzioni, molto importante e diverso dal block scope visto in precedenza, quello era più annidato a livello di codice dentro una stessa funzione, ma abbiamo visto che non ci interessa saperlo usare).

L'ambito di visibilità di una variabile, detto scope, è la parte di codice all’interno della quale si può fare riferimento a tale variabile.

Le variabili dichiarate fuori da qualsiasi funzione sono dette globali e sono accessibili da qualsiasi punto dello script, anche all’interno di funzioni.

Le variabili dichiarate all’interno di una funzione invece sono dette locali e sono accessibili soltanto all’interno della funzione stessa.

Ad esempio, se definisco una variabile globale, che per comodità ho chiamato variabile_globale e una variabile locale all’interno di una funzione, chiamata anch’essa per comodità variabile_locale, quando vado ad eseguire la funzione il codice inizierà a leggere prima quello che sta fuori dalla funzione (e che non si trova dentro altre funzioni) e successivamente il codice della funzione desiderata. Nel caso specifico questa chiama a sua volta una seconda funzione che utilizzo per mostrare in console il contenuto delle due variabili. Come si può vedere per la variabile globale viene mostrato il suo valore, mentre per quella locale viene generato un errore, questo perché la prima si trova fuori da tutto e quindi può essere recuperata in altre parti del codice, mentre la seconda esiste solo nella prima funzione, pertanto la seconda non può vederla.

Ora guarda cosa succede se dentro la funzione modifico il valore alla variabile globale, la scrivo senza var perché l’ho già dichiarata e voglio riferirmi ad essa. Tolgo la variabile locale e la sua stampa in console per non generare confusione. Se provo ad eseguire la funzione il risultato mostrato nella seconda funzione è quello che ho modificato all’interno della prima funzione chiamata. Questo perché posso accedere alla variabile globale da qualsiasi punto del codice.

Attenzione, se avessi ridichiarato con var la variabile all’interno della funzione sarebbe diventata a tutti gli effetti una nuova variabile locale, distinta da quella globale anche se ha lo stesso nome, pertanto eseguendo il codice in console vedrei il valore della variabile globale dal momento che la seconda ha vita solo all’interno della funzione dove è stata definita.

Da qui l’importanza di utilizzare var solo la prima volta che si dichiara una variabile e, ancora una volta, chiamare con nomi diversi le variabili che hanno diversa finalità.

Per allenamento potete usare "use strict" all’inizio del vostro foglio di lavoro. In questo modo il sistema vi costringerà sempre a dichiarare una variabile con la sua parola chiave (var) prima di poterla utilizzare. In caso di variabile non inizializzata, vi restituirà un errore.

L'uso di var e degli ambiti di variabili globali e locali è l’unico concetto che vi serve sapere per poter scrivere codice e ottenere qualsiasi risultato desideriate.

Saper giocare con le variabili globali inoltre ti farà risparmiare un sacco di tempo quando ti troverai a passare valori da una funzione all’altra dal momento che non avrai bisogno di passarli perché saranno accessibili liberamente chiamando la variabile con il suo nome, come abbiamo visto nell’ultimo esempio.

Lasciami un commento per farmi sapere cosa ne pensi o se hai alcuni dubbi su quanto ti ho appena raccontato in questa video lezione.

Nel prossimo video parleremo di tipi di dato, stringhe, numeri e array. Vedremo rapidamente il loro significato e quali sono le operazioni più comuni che si effettuano con e su questo tipo di valori. La semplificazione che ti svelerò si focalizzerà proprio su quest’ultimo aspetto.

Ricordati di iscriverti al mio canale per rimanere aggiornato sull’uscita delle nuove video lezioni.
A presto, Ciao ;)

VAI alla Lezione 3 bis: addendum, Esempio pratico, Invito alla Tribù

TORNA alla Lezione 2: Sintassi e Best Practice