TechCorso di programmazioneNewsProfessione web

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

Mini guida su ES6 - Let, Const, Template literals e Destructuring 1

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.

Mini guida su ES6 - Let, Const, Template literals e Destructuring 2

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 Destructuring

La 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

Leave a Response

Valerio Pisapia
Valerio Pisapia, 34 anni, laureato in Ingegneria Informatica all’Università di Napoli Federico II. Ha esperienza decennale nello sviluppo mobile e web in ambito internazionale. Fornisce training e mentoring per progetti di svariata natura. Founder di una startup IT in Svizzera che si occupa di consulenza specializzata in ambito Web.
Translate »

Su questo sito utilizziamo strumenti nostri o di terze parti che memorizzano piccoli file (cookie) sul tuo dispositivo. I cookie sono normalmente usati per permettere al sito di funzionare correttamente (cookie tecnici), per generare statistiche di uso/navigazione (cookie statistici) e per pubblicizzare opportunamente i nostri servizi/prodotti (cookie di profilazione). Possiamo usare direttamente i cookie tecnici, ma hai il diritto di scegliere se abilitare o meno i cookie statistici e di profilazioneAbilitando questi cookie, ci aiuti ad offrirti una esperienza migliore con noi. 

 

>> Cookie Policy <<