ES6… new, simple, fast!

Diciamoci la verità, sono veramente pochi quelli che usano Javascript perché è un bellissimo linguaggio… lo usano perché è onnipresente! PC, smartphone, tablet, tv…

Io amo JavaScript, ci lavoro da più di 12 anni.
Quando sono comparsi i primi tool per eseguire ECMAScript 6 mi sono convinto che era sicuramente arrivato il momento di iniziare a fare prove concrete con le nuove fantastiche funzionalità messe a disposizione. Questo anche grazie alle attività che svolgo in questo periodo presso il cliente.

Gli ultimi rilasci dei più comuni browser, hanno incluso già molte di queste funzionalità all’interno dell’engine JavaScript e quindi potrebbero essere già disponibili all’interno del nel vostro browser.

Infatti se diamo un rapido sguardo all’interno di questa pagina web possiamo visualizzare in che modo il nostro browser supporta ES6 e quali funzionalità possiamo usare (https://kangax.github.io/compat-table/es6/).

## Assegnazioni destrutturate
Permette di assegnare valori alle variabili utilizzando un’abbinamento con supporto nativo alla corrispondenza di array e oggetti.

Questa nuova funzionalità semplifica in modo sostanziale l’assegnazione o inizializzare più variabili con una singola istruzione.

function getUser(){
return {name: ‘Luciano’, surname: ‘Murruni’, company: ‘Comtaste’, newEl: ”};
}

var {name, surname, company, newEl} = getUser();
alert(”+ name+’, ‘+surname+’, ‘+company);

## let
Prima del rilascio ES6, per dichiarare una nuova variabile, l’unico modo era quello di usare la parola chiave var.

Con ES6, ora abbiamo due nuovi costrutti aggiuntivi per definire nuove variabili: const e let.

La sintassi di dichiarazione let è identica a var.
È fondamentalmente possibile sostituire var con let per dichiarare una variabile, ma mantenere la sua portata al blocco di codice corrente.

Molti sviluppatori JavaScript, utilizzando la parola chiave var per definire le variabili potrebbero avere un risultato diverso in fase di esecuzione.
Pensate per esempio alla manutenibilità del codice.
Utilizzando let al posto di var si produce codice più chiaro, che è sinonimo di manutenibilità rendendo la vita degli sviluppatori più semplice.

## const
L’utilizzo di const all’interno del nostro codice crea variabili con un valore sempre costante durante l’esecuzione del nostro codice.
Le variabili definite con la parola chiave const infatti non saranno mai mutate.

{{esempio 0.2}}

## String Template

La funzionalità string template consente in modo semplice di manipolare una stringa.
Possono essere multi riga, e supportano la manipolazione della stringa attraverso la sintassi ${}.

{{esempio 0.3}}
## Set()
Javascript ha due potenti contenitori: Array e Object.
Gli array possono essere trattate come una coda oppure una lista, e per manipolarli, per esempio possiamo rimuovere un oggetto all’inizio o alla fine.
Ma restavano comunque parecchi limiti, che librerie come lodash andavano a colmare.

Ma ci sono molte cose che un semplice array javascript non fa facilmente.

– Se vuoi che il tuo Array non abbia duplicati, devi aggiungere la logica per prevenire l’inserimento di duplicati.
Per far fronte a questo, ES6 implementa la nuova funzionalità Set();
Come dice il nome stesso Set rappresenta un set di elementi.

L’oggetto Set è molto di più che un semplice array in Javascript perchè consente mantenere in modo semplice dati univoci al suo interno.
## Map()
In altri linguaggi, ci riferiamo alle mappe come hashmap o dizionari.
Un hashmap ha una chiave ed un valore. Javascript ha questo tipo di funzionalità da molto tempo, infatti JSON è di fatto una struttura dati basata su chiave-valore.

Map() aggiunge funzionalità importanti al JSON di Javascript, per esempio in JSON è possibile usare solo numeri e stringhe come chiave, mentre con il nuovo oggetto Map è possibile usare qualsiasi oggetto come chiave.
Per esempio possiamo avere anche una funzione come chiave.

## WeakMap() e WeakSet()

Gli oggetti WeakMap() sono molto simili agli oggetti Map() con alcune eccezioni:

– La principale differenza è che le WeakMap si ripuliscono in modo semplice.

Unlike a map, WeakMaps will let the garbage collector remove the element from memory. If the only reference to the HTML element is the key in the weak map, the weak map will release its reference as well. Once all references have been dropped, you can then say goodbye to the HTML element forever.
## Iterator e Generator
Interessante novità introdotta da ES6 è la possibilità di iterare array, Set, Map, e normalissimi oggetti.
In pratica, un esempio concreto è non siamo più costretti ad utilizzare (index e lenght) all’interno del costrutto “for”.

Con le iterazioni di ES6 qualsiasi oggetto può essere iterato se definisce al suo interno un metodo next().

{{esempio 0.4}}
## Rest parameters
Il termine “rest” spesso si riferisce a REST, cioè un modello comune per la scrittura di servizi web. Nel contesto del rilascio ES6, “rest” non ha nulla a che fare con un servizio web.

Molti altri linguaggi moderni consentono di creare un nuovo metodo che prende in ingresso un numero indefinito di parametri.

Si consideri una funzione chiamata add(). Potrebbe essere necessario aggiungere 2 numeri insieme;
potrebbe essere necessario aggiungere 100 numeri insieme.

E noi non vorremmo scrivere 100 chiamate add separate in modo che si può semplicemente aggiungere una quantità dinamica di numeri insieme, giusto?

Le funzioni ES6 con i parametri REST ora danno la possibilità di avere funzioni che non hanno un numero predefinito di parametri.

{{esempio 0.5}}

## Arrow Function
Capire cosa possono offrire le Arrow Function ai programmatori Javascript potrebbe essere difficile.
Proviamo fornire una spiegazione chiara su come si comportano le arrow function…

Le Arrow Function sono una nuova sintassi che consente agli sviluppatori di gestire in modo diverso lo scope fornendo un valore diverso.
Anche se questo può confondere, le arrow function consentono di scrivere un codice Javascript molto più leggibile.

Quando usiamo le arrow function, il nostro codice viene letto allo stesso modo in cui viene eseguito.
Tale funzionalità contribuisce di conseguenza a una sempre più facile manutenibilità dello stesso.

Inoltre, le arrow function hanno una sintassi semplice come possiamo vedere nel seguente esempio.
{{esempio 0.6}}
## Method definition shorthand
Abbiamo visto come in molti casi ES6 semplifica molto la scrittura del codice.
In ES5 quando dichiariamo un oggetto ed al suo interno vogliamo aggiungere un nuovo metodo dobbiamo specificare sia il nome del metodo che la relativa funzione.

## Classes
Uno dei modi più semplici per riutilizzare il codice delle applicazioni che scriviamo è quello di definire un pezzo di codice per poi ereditarlo in uno nuovo ed estenderlo nel caso specifico.

Javascript già usava, grazie al prototype, il concetto di ereditarietà, ma a partire da ES6 saremo in grado di utilizzare anche il costrutto class.

Le classi di ES6 infatti sono una fantastica novità prototype-based in ottica Object Oriented.

La sintassi per la creazione di una nuova classe come possiamo vedere dal codice di seguito è decisamente più pulita e semplice rispetto al vecchio prototype.

A mio avviso le classi hanno due vantaggi principali:

– Sintassi leggera, e semplice per un codice sempre più leggibile.
– Una volta che le classi completeranno la sostituzione dell’attuale metodo di ereditarietà, le normali function avranno un ingombro minore in memoria.

Le classi in ES6 portano sempre di più la scrittura del codice orientata agli oggetti.Las sintassi del costrutto class supporta

– ereditarietà
– chiamate al metodo super()
– costruttori
– proprietà statiche

Il metodo super() non fa altro che chiamare il cotruttore della classe ereditata e ne restituisce il risultato.

Quali sono i vantaggi nell’uso delle classi ES6?
Oltre alla facilità di comprensione del codice, le classi ES6 consentono una più veloce scrittura del codice (meno caratteri da scrivere), questo lo rendono sempre più scalabile e facile da manutenere.

Le classi ES6 non possono essere paragonate a quelle di Java o C++ ma di sicuro sono sulla strada giusta per una corretta maturità del linguaggio.

{{esempio 0.7}}

Le classi attualmente potrebbero sembrare solo più pulite rispetto al vecchio uso con i prototype, ma quando si lavora a progetti molto complessi, su larga scala, questo potrebbe essere un enorme vantaggio.
## Modules

## Promise