JavaScript ES6 Features (Italiano)

In questo tutorial potrete conoscere le nuove funzionalità nella versione più recente di JavaScript.

Cos’è ECMAScript 6 (o ES6)

ECMAScript 2015 (o ES6) è la sesta e principale edizione dello standard di specifica del linguaggio ECMAScript. Definisce lo standard per l’implementazione JavaScript.

ES6 ha apportato modifiche significative al linguaggio JavaScript., Introduce diverse nuove funzionalità come variabili con ambito di blocco, nuovo ciclo per l’iterazione su array e oggetti, modelli letterali e molti altri miglioramenti per rendere la programmazione JavaScript più semplice e divertente. In questo capitolo, discuteremo alcune delle migliori funzionalità ES6 che è possibile utilizzare nella codifica JavaScript di tutti i giorni.

La parola chiave let

ES6 introduce la nuova parola chiavelet per dichiarare le variabili. Prima di ES6, l’unico modo per dichiarare una variabile in JavaScript era la parola chiave var., Vediamo qual è la differenza tra loro è.

Esistono due differenze critiche tra var e let. Le variabili dichiarate con la parola chiavevar sono con ambito di funzione e issate in alto all’interno del suo ambito, mentre le variabili dichiarate con la parola chiavelet sono con ambito di blocco ({}) e non sono issate.

Blocco scoping significa semplicemente che un nuovo ambito viene creato tra una coppia di parentesi graffe cioè{}., Pertanto, se si dichiara una variabile con il let parola chiave all’interno di un ciclo, non esiste al di fuori del ciclo, come illustrato nell’esempio seguente:

Come si può vedere nell’esempio precedente, la variabile i il primo blocco non è accessibile al di fuori del for loop. Ciò ci consente anche di riutilizzare lo stesso nome di variabile più volte in quanto il suo ambito è limitato al blocco ({}), il che si traduce in meno dichiarazione di variabile e codice più pulito.,

La parola chiave const

La nuova parola chiaveconst consente di definire costanti. Le costanti sono di sola lettura, non è possibile riassegnare loro nuovi valori. Sono anche con ambito di blocco come let.

const PI = 3.14;console.log(PI); // 3.14PI = 10; // error

Tuttavia, puoi ancora modificare le proprietà dell’oggetto o gli elementi dell’array:

Il for…di Loop

Il nuovo ciclofor...of ci permette di iterare su array o altri oggetti iterabili molto facilmente., Inoltre, il codice all’interno del ciclo viene eseguito per ogni elemento dell’oggetto iterabile. Ecco un esempio:

Il ciclo for...of non funziona con gli oggetti perché non sono iterabili. Se si desidera scorrere le proprietà di un oggetto, è possibile utilizzare il ciclo for-in.

Modello letterali

Modello letterali forniscono un modo semplice e pulito creare stringhe multi-linea ed eseguire l’interpolazione delle stringhe. Ora possiamo incorporare variabili o espressioni in una stringa in qualsiasi punto senza problemi.,

I letterali del modello vengono creati usando il carattere back-tick (` `) (accento grave) invece delle solite virgolette doppie o singole. Le variabili o le espressioni possono essere posizionate all’interno della stringa utilizzando la sintassi ${...}. Confronta i seguenti esempi e vedi quanto è utile:

Mentre in ES5, per ottenere lo stesso, abbiamo dovuto scrivere qualcosa del genere:

Valori predefiniti per i parametri di funzione

Ora, in ES6 è possibile specificare i valori predefiniti per i parametri di funzione., Ciò significa che se non vengono forniti argomenti per funzionare quando viene chiamato, verranno utilizzati i valori dei parametri predefiniti. Questa è una delle caratteristiche più attese in JavaScript. Ecco un esempio:

Mentre in ES5, per ottenere lo stesso abbiamo dovuto scrivere qualcosa del genere:

Funzioni freccia

Le funzioni freccia sono un’altra caratteristica interessante in ES6. Fornisce una sintassi più concisa per la scrittura di espressioni di funzione optando per le parole chiavefunction ereturn.,

Le funzioni freccia sono definite utilizzando una nuova sintassi, la notazione fat arrow (=>). Vediamo come appare:

Come puoi vedere non c’èfunction ereturn parola chiave nella dichiarazione della funzione freccia.

Puoi anche saltare le parentesi cioè() nel caso in cui ci sia esattamente un parametro, ma dovrai sempre usarlo quando hai zero o più di un parametro.,

Inoltre, se c’è più di un’espressione nel corpo della funzione, è necessario avvolgerla tra parentesi graffe ({}). In questo caso è anche necessario utilizzare l’istruzione return per restituire un valore.

Esistono diverse varianti di come è possibile scrivere funzioni freccia. Ecco i più comunemente usati:

C’è un’importante differenza tra le funzioni regolari e le funzioni freccia., A differenza di una funzione normale, una funzione freccia non ha il propriothis, prendethis dalla funzione esterna in cui è definita. In JavaScript,this è il contesto di esecuzione corrente di una funzione.,

Per capire questo, chiaramente, facciamo il check-out le seguenti esempi:

Riscrivere lo stesso esempio con ES6 modello di valori letterali e freccia funzione:

Come si può vedere chiaramente, il this parola chiave nell’esempio di cui sopra si riferisce al contesto della funzione allegando la freccia funzione che è oggetto di Persona (linea n-9), a differenza dell’esempio precedente in cui di cui all’oggetto globale Window (linea n-9).

Classi

In ECMAScript 5 e versioni precedenti, le classi non sono mai esistite in JavaScript., Le classi sono introdotte in ES6 che sembra simile alle classi in altri linguaggi orientati agli oggetti, come Java, PHP, ecc., tuttavia non funzionano esattamente allo stesso modo. Le classi ES6 semplificano la creazione di oggetti, implementano l’ereditarietà utilizzando la parola chiaveextends e riutilizzano il codice.

In ES6 puoi dichiarare una classe usando la nuova parola chiaveclass seguita da un nome-classe. Per convenzione i nomi delle classi sono scritti in TitleCase (cioè capitalizzando la prima lettera di ogni parola).,

Nell’esempio precedente la classe Square eredita da Rectangle usando la parola chiave extends. Le classi che ereditano da altre classi sono indicate come classi derivate o classi figlio.

Inoltre, è necessario chiamare super() nel costruttore della classe figlio prima di accedere al contesto (this)., Ad esempio, se si omette il metodo super() e si chiama il metodo getArea() sull’oggetto quadrato si verificherà un errore, poiché il metodo getArea() richiede l’accesso alla parola chiave this.