Variabili

La maggior parte delle volte, le applicazioni JavaScript necessitano di lavorare con informazioni. Vediamo due esempi:

1. Un negozio online – le informazioni possono riguardare i beni venduti e il carrello.
2. Un applicazione di messaggistica – le informazioni possono riguardare utenti, messaggi e molto altro.

Le variabili vengono utilizzate per memorizzare informazioni.

Variabile

Una variabile è uno “spazio di memoria con nome” utilizzato per salvare dati. Possiamo usare le variabili per memorizzare informazioni extra, visitatori e altri dati.

Per creare una variabile in JavaScript, dobbiamo utilizzare la parola chiave let.

L’istruzione sotto crea (in altre parole: dichiara) una variabile identificata dal nome “messaggio”:

let message;

Adesso possiamo inserirci dei dati utilizzando l’operatore di assegnazione =:

let message;

message = 'Hello'; // memorizzazione della stringa

La stringa è adesso salvata nell’area di memoria associata alla variabile. Possiamo accedervi utilizzando il nome della variabile:

let message;
message = 'Hello!';

alert(message); // mostra il contenuto della variabile

Per essere precisi, potremmo unire la dichiarazione e l’assegnazione in una singola riga:

let message = 'Hello!'; // definisce la variabile e gli assegna il valore

alert(message); // Hello!

Possiamo anche dichiarare più variabili in una riga:

let user = 'John', age = 25, message = 'Hello';

Questo potrebbe risultare più breve, ma è sconsigliato. Per mantenere una migliore leggibilità è meglio dichiarare solamente una variabile per riga.

L’alternativa a più righe è un po più lunga, ma più facile da leggere:

let user = 'John';
let age = 25;
let message = 'Hello';

Alcune persone scrivono variabili multiple in questo modo:

let user = 'John',
  age = 25,
  message = 'Hello';

…O anche con la virgola su nuova riga:

let user = 'John'
  , age = 25
  , message = 'Hello';

Tecnicamente, tutte queste varianti fanno la stessa cosa. Quindi è una questione di gusto personale ed estetico.

var message = 'Hello';

Un’analogia con il mondo reale

Possiamo comprendere meglio il concetto di “variabile” se la immaginiamo come una scatola per dati, con appiccicata un’etichetta univoca.

Per esempio, la variabile message può essere immaginata come una scatola con etichetta "message" con il valore "Hello!" al suo interno:

Possiamo inserire qualsiasi valore all’interno della scatola.

Possiamo anche cambiarlo. Il valore può cambiare tutte le volte che ne abbiamo bisogno:

let message;

message = 'Hello!';

message = 'World!'; // il valore è cambiato

alert(message);

Quando il valore viene cambiato, il dato vecchio viene rimosso dalla variabile:

Possiamo anche dichiarare due variabili e copiare i dati da un all’altra.

let hello = 'Hello world!';

let message;

// copia 'Hello world' da hello in message
message = hello;

// ora le due variabili contengono gli stessi dati
alert(hello); // Hello world!
alert(message); // Hello world!

let message = "This";

// 'let' ripetuto genererà un errore
let message = "That"; // SyntaxError: 'message' has already been declared

Nomi delle variabili

In JavaScript ci sono solo due limitazioni per il nome delle variabili:

1. Il nome deve contenere solo lettere, numeri, simboli $ e _.
2. Il primo carattere non può essere un numero.

Esempi di nomi validi:

let userName;
let test123;

Quando il nome contiene più parole, viene utilizzato il camelCase. La logica è: le parole vanno una dopo l’altra, ogni parola inizia con lettere maiuscola: myVeryLongName.

Una cosa interessante è che – il simbolo del dollaro '$' e l’underscore '_' possono essere utilizzati nei nomi. Sono dei semplici simboli, come le lettere, senza alcun significato speciale.

Ad esempio questi nomi sono validi:

let $ = 1; // dichiarata una variabile con nome "$"
let _ = 2; // qui una variabile con nome "_"

alert($ + _); // 3

Questi invece non lo sono:

let 1a; // non può cominciare con una stringa

let my-name; // '-' non è consentito nei nomi

let имя = '...';
let 我 = '...';

let let = 5; // non è possibile chiamare una variabile "let", errore!
let return = 5; // nemmeno "return", errore!

// da notare: no si utilizza "use strict" in questo esempio

num = 5; // la variabile "num" se non esiste già

alert(num); // 5

"use strict";

num = 5; // errore: num non è definita

Costanti

Per dichiarare una variabile costante (immutabile), dobbiamo utilizzare const invece di let:

const myBirthday = '18.04.1982';

Le variabili dichiarate con const vengono chiamate “costanti”. Non possono cambiare valore. Se tentassimo di farlo verrebbe sollevato un errore:

const myBirthday = '18.04.1982';

myBirthday = '01.01.2001'; // errore, non è possibile riassegnare la costante!

Quando il programmatore è sicuro che il valore della variabile non cambierà mai, può utilizzare const per soddisfare questa esigenza, rendendolo cosi esplicito.

Le costanti maiuscole

Una pratica molto diffusa è di utilizzare le variabili costanti come alias di valori difficili da ricordare, e che sono noti prima dell’esecuzione.

Questo tipo di costanti vengono identificate con lettere maiuscole e underscore.

Come in questo esempio, creiamo delle costanti nel cosidetto formato “web” (esadecimale):

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// ...quando abbiamo bisogno di prelevare un colore
let color = COLOR_ORANGE;
alert(color); // #FF7F00

Benefici:

• COLOR_ORANGE è più facile da ricordare di "#FF7F00".
• E’ più facile commettere errori scrivendo "#FF7F00" piuttosto che COLOR_ORANGE.
• Quando leggiamo il codice, COLOR_ORANGE è molto più significativo di #FF7F00.

Quando dovremmo utilizzare lettere maiuscole per una costante, e quando invece trattarle come normali variabili? Facciamo un pò di chiarezza.

Essere una “costante” significa che il valore non potrà mai cambiare. Ci sono costanti che sono note prima dell’esecuzione (come la codifica esadecimale del colore rosso), e ci sono quelle che vengono calcolate durante l’esecuzione, ma non cambieranno più dopo che gli sarà stato assegnato un valore.

Per esempio:

const pageLoadTime = /* tempo necessario da una pagina web per caricare */;

Il valore di pageLoadTime non è noto prima del caricamento della pagina, quindi viene trattato come una normale variabile. Ma rimane comunque una costante, perché non potrà più cambiare dopo che gli sarà stato assegnato un valore.

In altre parole, i nomi delle costanti in maiuscolo vengono utilizzati con variabili dal valore noto prima dell’esecuzione.

Dare i giusti nomi alle cose

Parlando di variabili, c’è un’altra cosa estremamente importante.

Il nome di una variabile dovrebbe sempre essere pulito, ovvio e descrittivo del suo contenuto.

Dare i giusti nomi alle variabili è una delle abilità più importanti (e difficili) nella programmazione. Una rapida occhiata ai nomi delle variabili può rivelare se il codice è stato scritto da un principiante o da uno sviluppatore esperto.

In un progetto reale, la maggior parte del tempo lo si perde a modificare ed estendere del codice già esistente, piuttosto che riscriverne uno nuovo. E quando ritorneremo sul codice, dopo aver fatto qualcos’altro, sarà molto pù facile trovare informazioni se sono ben descritte. In altre parole, quando le variabili utilizzano dei nomi efficaci.

Quindi è utile spendere del tempo a pensare il giusto nome per una variabile, prima di dichiararla. Questo approccio vi ripagherà.

Alcune regole da seguire:

• Utilizzare nomi leggibili da persone, come userName o shoppingCart.
• Evitate abbreviazioni o nomi brevi come a, b, c, senza che abbiano veramente senso.
• Rendete il nome il più descrittivo e preciso possibile. Esempi di pessimi nomi sono data e value. Questo tipo di nomi non dicono niente. Si possono utilizzare eccezionalmente se il contesto rende esplicito il significato.
• Definire delle regole personali o con il team. Se il visitatore del sito viene chiamato “user” allora dovremmo chiamare la relativa variabile come currentUser o newUser, non currentVisitor o newManInTown.

Sembra facile? Infatti lo è, ma trovare dei buoni nomi che siano precisi e descrittivi nella pratica non è sempre cosi semplice.

Riepilogo

Possiamo dichiarare variabili per memorizzare dati. Possono essere dichiarate con var,let o const.

• let – è una dichiarazione delle variabili più moderna.
• var – è una dichiarazione delle variabili più vecchia-scuola. Normalmente non si dovrebbe utilizzare, spiegheremo le sottili differenze da let nel capitolo Il vecchio "var", giusto per esserne a conoscenza.
• const – è simile a let, ma non consente di cambiare il valore della variabile.

Le variabili dovrebbero avere dei nomi che ci consentono di capire facilmente cosa c’è dentro.