Mini guida su ES6 – Let, Const, Template literals e Destructuring

Iniziamo il nostro viaggio alla scoperta delle nuove funzionalità del moderno Javascript (ES6+).

Il menù di oggi offre:

1. Let
2. Const
3. Template literals
4. Destructuring

Analizzeremo punto per punto con qualche esempio pratico per rendere il più chiaro possibile la funzionalità esposta.

1. LET

In Javascript var era l’unico modo per dichiarare una variabile, il problema con var è che non ha scope e puoi dichiarare la stessa variabile più volte, ecco perché ora abbiamo let e const keyword.

Definiamo per bene la keyword let:

let consente di dichiarare variabili limitate nell’ambito del blocco, dell’istruzione o dell’espressione su cui viene utilizzato. Questo è diverso dalla parola chiave var, che definisce una variabile globalmente o localmente a un’intera funzione indipendentemente dall’ambito del blocco.

Vediamo un esempio:

 var date = new Date("2015-01-01");
 var region = "IT";
 if (region === "IT") {
 var date = new Date();
 console.log("New date", date); // Otteniamo la data corrente
 }
 console.log(date); Ci aspetteremmo Thu Jan 01 2015 01:00:00 GMT+0100 (Central European Standard Time) ma otteniamo la data corrente

Noi sviluppatori non siamo bravissimi nel dare nomi coerenti alla variabili e se stiamo lavorando con altri il problema è ingrandito di 10 volte. Quindi non è raro che usiamo lo stesso nome per cose diverse.

Vediamo lo stesso esempio ma con let:

let date = new Date("2015-01-01");
 let region = "IT";
 if (region === "IT") {
 let date = new Date();
 console.log("New date", date); // Otteniamo la data corrente
 }
 console.log(date); // Otteniamo Thu Jan 01 2015 01:00:00 GMT+0100 (Central European Standard Time) :) Yeah!

Lo scope rappresenta il vantaggio maggiore dal mio punto di vista. Tuttavia, abbiamo anche altri benefici:

1. Redeclaration: se dichiari una variabile con lo stesso nome nella stessa funzione o nell’ambito di un blocco, otteniamo un’eccezione SyntaxError.  Ottimo per evitare di dichiarare variabili con lo stesso nome.
2. Hoisting: se si utilizza una variabile prima della dichiarazione, si ottiene un ReferenceError.

2. CONST

const ci permette di dichiarare una variabile costante, un valore che non dovrebbe cambiare nel nostro codice.

Ad esempio:

const number=1111;
 try {
 number=300;
 } catch(error) {
 console.log(error); // TypeError: Assignment to constant variable.
 // Note - il messaggio di errore dipenderà dal browser che si sta utilizzando.
 }
 console.log(number); // output 1111

Altre caratteristiche notevoli di const:

1. Scoping: le variabili sono block-scoped come per let.
2. Immutable: il valore di una variabile costante non può cambiare.
3. Redeclaration: come per una variabile let, const non può essere dichiarata nuovamente.

Promessa per questo 2019: smettiamola di usare var per dichiarare le variabili 🙂

3. TEMPLATE LITERALS

Utilizziamo le stringhe ovunque, e di solito, dobbiamo passare alcune variabili alla stringa. Qui è dove i template literals vengono in soccorso.

I template literals sono racchiusi dal carattere back-tick (`) anziché da virgolette singole o doppie.

I template literals possono contenere placeholder. Questi sono indicati dal simbolo del dollaro e dalle parentesi graffe ($ {espressione}).

Vediamo qualche esempio:

let a = 5;
 let b = 10;
 console.log(`La somma di a e b è ${a+b}`); // La somma di a e b è 15

Possiamo avere anche testi multi-line:

let name='Valerio';
let age=33;
let country='Italy';

console.log(`${name} ha
  ${age} anni e vive
  in ${country}
`);

Qui Javascript mostrerà il testo multilinea e rispetterà gli spazi senza il bisogno di caratteri speciali come \ n.

4. DESTRUCTURING

Definiamo formalmente cosa è il DestructuringLa destrutturazione consente di assegnare le proprietà di un array o di un oggetto a delle variabili utilizzando una sintassi simile ai valori di oggetti o array literals. Questa sintassi può essere estremamente concisa, pur mostrando una maggiore chiarezza rispetto all’accesso alle proprietà tradizionale.In pratica se volessimo accedere ai primi 3 valori di un array utilizzando il metodo classico, la sintassi sarebbe la seguente:

let first = someArray[0];
let second = someArray[1];
let third = someArray[2];

Nel caso di utilizzo Destructuring il codice diventerebbe più conciso e leggibile:

let [first, second, third] = someArray;

Possiamo usarlo anche su un oggetto come detto nella definizione, ad esempio:

let dog = {
 name: 'Toby',
 age: 3,
 breed: 'Beagle',
 features: {
 color: 'Bianco e nero',
 favoriteToy: 'papero di plastica'
 }
 }
 // Possiamo ottenere valori con destructuring in questo modo:
 let {name, age, breed} = dog;
 // Cosa fare se vogliamo ottenere solo nome ed età e tutti gli altri in un'altra variabile?
 // Semplicissimo. Guarda con i tuoi occhi :)
 let {name, age, ...info} = dog;

Possiamo associare un valore di default ad una proprietà nel caso in cui durante il destructuring, tale proprietà abbia un valore indefinito. Ad esempio:

var [missing = true] = [];
 console.log(missing);
 // true
 var { message: msg = "Ciao Mondo" } = {};
 console.log(msg);
 // "Ciao Mondo"
 var { x = 3 } = {};
 console.log(x);
 // 3

Possiamo quindi affermare (e confermare) che attraverso il Destructuring riusciamo ad estrarre dati da array o oggetti in maniera semplice, utile e leggibile.

Con questo chiudo il nostro primo appuntamento :).

Alla prossima.

Spero questo articolo sia stato utile. Se si, condividilo con i tuoi amici, colleghi o con chi ritieni che possa essere interessato.

PS Se sei interessato a conoscere in anticipo gli argomenti per i prossimi appuntamenti, ti consiglio di visitare il primo articolo