Funzionalità di JavaScript ES6

ECMAScript 6 (ES6) è un aggiornamento significativo del linguaggio JavaScript che ha introdotto molte nuove funzionalità, rendendo JavaScript più potente ed efficiente. Questa guida esplora in dettaglio ES6, offrendo spiegazioni complete e numerosi esempi di codice per aiutarti a padroneggiare queste nuove capacità.

Introduzione a ES6

ES6, noto anche come ECMAScript 2015, ha portato molti miglioramenti e nuove funzionalità a JavaScript. ECMAScript è lo standard ufficiale che JavaScript implementa, e ES6 ne è stata la revisione più grande dal 1999. Questi cambiamenti hanno reso il linguaggio più moderno e più semplice da usare, migliorando sia la leggibilità sia la manutenibilità.

Questa guida illustra le funzionalità che userai più spesso:

• Dichiarazioni di variabili — let e const
• Funzioni — arrow function e parametri predefiniti
• Stringhe — template literal
• Lavorare con i dati — destructuring, object literal avanzati, rest/spread
• Codice asincrono — promise
• Codice orientato agli oggetti — classi e moduli
• Nuove collezioni e primitive — Map, Set, WeakMap, WeakSet, Symbol, iteratori, generatori e proxy

Oggi ogni browser moderno e Node.js supportano ES6 nativamente, quindi puoi usare queste funzionalità senza una fase di build. Ogni esempio qui sotto è eseguibile—modificalo e premi run per sperimentare.

Let e Const

Uno dei cambiamenti più notevoli in ES6 è l'introduzione di let e const per la dichiarazione delle variabili. Prima di ES6, l'unica opzione era var, che ha scope di funzione e viene sottoposta a hoisting in un modo che spesso produce bug sorprendenti. let e const hanno scope di blocco e si comportano in modo più prevedibile, motivo per cui il codice moderno usa raramente var.

Let

La parola chiave let ti permette di dichiarare variabili il cui scope è limitato al blocco, all'istruzione o all'espressione in cui vengono usate.

Nell'esempio sopra, la x dichiarata all'interno del blocco if è una variabile separata dalla x dichiarata all'esterno. Questo dimostra lo scope a livello di blocco fornito da let. Con var, entrambe le assegnazioni farebbero riferimento alla stessa variabile, e il console.log esterno stamperebbe 20.

let e const sono anche soggette alla temporal dead zone (TDZ): la variabile esiste dall'inizio del blocco ma non può essere letta o assegnata finché la sua dichiarazione non viene eseguita. Farvi riferimento prima genera un ReferenceError, che intercetta errori di battitura che var trasformerebbe silenziosamente in undefined.

Const

La parola chiave const viene usata per dichiarare variabili i cui valori non sono destinati a cambiare. Ha scope di blocco come let.

In questo esempio, il tentativo di riassegnare un valore a y genera un errore perché const dichiara una costante il cui valore non può essere modificato.

Un punto comune di confusione: const impedisce la riassegnazione del binding, non la mutazione del valore. Un oggetto o un array dichiarato con const può comunque avere il proprio contenuto modificato—semplicemente non puoi far puntare la variabile a un oggetto diverso.

Arrow Function

Le arrow function offrono una sintassi concisa per scrivere espressioni di funzione. Legano anche lessicalmente il valore di this, il che le rende particolarmente utili per scrivere funzioni brevi.

Qui, l'arrow function add prende due parametri e restituisce la loro somma. Quando il corpo è una singola espressione, puoi omettere le graffe e la parola chiave return—il valore dell'espressione viene restituito automaticamente.

Il vantaggio più grande è che le arrow function non hanno un proprio this; lo ereditano dallo scope circostante. Prima delle arrow function, le callback perdevano spesso il this atteso e gli sviluppatori aggiravano il problema con const self = this o .bind(this). Le arrow function rendono superfluo questo boilerplate:

Template Literal

I template literal facilitano la creazione di stringhe, specialmente quando si incorporano variabili o espressioni. Usano gli apici inversi (```) invece delle virgolette.

Questo esempio mostra come i template literal ti permettano di incorporare la variabile name direttamente nella stringa, migliorando leggibilità e comodità. Il segnaposto ${ ... } può contenere qualsiasi espressione, non solo una variabile—per esempio `Total: ${price * qty}`. I template literal si estendono anche su più righe senza \n, così puoi scrivere output formattato o piccoli frammenti HTML in linea.

Parametri Predefiniti

I parametri predefiniti ti permettono di inizializzare i parametri di una funzione con valori predefiniti se non vengono forniti valori.

In questo esempio, la funzione multiply assegna un valore predefinito di 1 a b se non viene fornito un secondo argomento, garantendo che la funzione restituisca sempre un risultato valido.

Assegnazione tramite Destructuring

Il destructuring assignment è un modo comodo per estrarre valori da array o object in variabili distinte.

Destructuring degli Array

Questo esempio mostra come il destructuring degli array ti permetta di assegnare i valori dell'array numbers a variabili individuali a, b e c.

Destructuring degli Object

In questo esempio, il destructuring degli object estrae le proprietà name e age dall'object person in variabili separate.

Object Literal Avanzati

ES6 migliora gli object literal, permettendo una sintassi più concisa e leggibile.

Qui, l'object obj usa nomi di proprietà abbreviati e definizioni di metodi, rendendo l'object literal più conciso.

Promise

Le promise offrono un modo per gestire le operazioni asincrone in modo più efficiente, evitando il callback hell e rendendo il codice più leggibile.

In questo esempio, viene creata una promise che si risolve dopo 1 secondo con il messaggio 'Success!'. Il metodo then viene usato per gestire il valore risolto.

Classi

ES6 ha introdotto le classi, fornendo una sintassi più chiara e concisa per creare object e gestire l'ereditarietà.

Questo esempio dimostra come le classi in ES6 offrano una sintassi pulita e intuitiva per definire gli object e il loro comportamento.

Moduli

I moduli ti permettono di suddividere il codice in file separati e di importare/esportare funzioni, object o primitive tra i file.

Esportazione

// math.js
export const add = (a, b) => a + b;

Importazione

// main.js
import { add } from './math.js';
console.log(add(2, 3)); // 5

In questi esempi, la funzione add viene esportata da math.js e importata in main.js, dimostrando come i moduli facilitino l'organizzazione e il riutilizzo del codice.

Operatori Rest e Spread

Operatore Rest

Il rest operator (...) ti permette di rappresentare un numero indefinito di argomenti come un array.

In questo esempio, la funzione sum usa l'operatore rest per raccogliere tutti gli argomenti in un array, rendendo facile eseguire operazioni su di essi.

Operatore Spread

L'operatore spread (...) permette a un iterabile (come un array) di essere espanso nei punti in cui sono attesi zero o più argomenti o elementi.

Questo esempio mostra come l'operatore spread possa essere usato per combinare gli array in un unico array, semplificando il codice.

Iteratori e Generatori

Iteratori

Gli iteratori sono object che ti permettono di percorrere una collezione, come un array o una stringa.

In questo esempio, l'iteratore fornisce un modo per accedere sequenzialmente a ogni elemento dell'array.

Generatori

I generatori sono funzioni che possono essere messe in pausa e riprese, offrendo un modo potente per gestire gli iterabili.

Questo esempio mostra come una funzione generatore possa produrre (yield) valori uno alla volta, mettendo in pausa l'esecuzione tra un yield e l'altro.

Symbol

I Symbol sono un nuovo tipo di dato primitivo introdotto in ES6. Sono unici e immutabili, spesso usati per creare chiavi uniche per gli object.

In questo esempio, symbol1 e symbol2 sono unici, anche se hanno la stessa descrizione.

Map e Set

Map

Le Map sono collezioni di coppie chiave-valore in cui le chiavi possono essere di qualsiasi tipo.

Questo esempio dimostra come creare una map, impostare coppie chiave-valore e recuperare i valori.

Set

I Set sono collezioni di valori unici.

In questo esempio, il set contiene solo valori unici, anche se 3 è stato aggiunto due volte.

Proxy

I Proxy ti permettono di creare un proxy per un altro object, consentendoti di intercettare e ridefinire operazioni fondamentali.

Questo esempio mostra come un proxy possa intercettare l'accesso a una proprietà, fornendo una risposta personalizzata quando la proprietà non viene trovata.

WeakMap e WeakSet

WeakMap

WeakMap è simile a Map ma permette solo object come chiavi e non impedisce la garbage collection se non ci sono altri riferimenti all'object chiave.

WeakSet

WeakSet è simile a Set ma permette solo object come valori e non impedisce la garbage collection se non ci sono altri riferimenti all'object.

Conclusione

ES6 porta con sé una ricchezza di funzionalità che rendono JavaScript un linguaggio più robusto ed efficiente. Comprendendo e utilizzando queste funzionalità, gli sviluppatori possono scrivere codice più pulito e più manutenibile. Questa guida ha offerto uno sguardo approfondito sugli aspetti più importanti di ES6, completo di esempi per aiutarti a iniziare.

Per approfondire i singoli argomenti, continua con le arrow function, il destructuring assignment, i rest parameter e la spread syntax, le classi, i moduli e le promise.

Esercitazione