Mini guida su ES6 – Semplifica i tuoi applicativi JS – Intro

Ciao a tutti.
Vi presento una nuova mini-serie dedicata a chi, come me, dedica gran parte del suo tempo a scrivere codice (più o meno) comprensibile utilizzando il tanto famoso e famigerato Javascript.

Con questa mini-serie, vorrei spiegarvi (entrando un pò anche nel dettaglio) come poter semplificare alcune operazioni che, in generale, potrebbero richiedere un numero considerevole di linee di codice; vi chiederete: beh facile a dirsi ma in pratica? Ecco voglio proprio essere pratico e mostrarvi casi d’uso reali in modo da centrare il problema e darvi una soluzione intellingente (lo si spera) per semplificare tra l’altro, il boilerplate del vostro progetto.

Il focus di questa mini-serie sarà ES6 (acronimo di ECMAScript 2015, ovvero la versione 6 di JavaScript, rilasciata nel 2015).

ES6 contiene molte novità sintattiche e ne vedremo alcuni esempi dettagliati in questi blogpost.

Prima di entrare nel “vivo” della miniserie, vorrei spendere questo primo post per fare una overview del traguardo raggiunto da JS con l’avvento della versione 6.

La versione precedente era ES5 ovvero ECMAScript 2009, la versione 5 di JavaScript. Tale versione è considerata la versione universale che anche i browser più vecchi (ma non troppo) riescono ad interpretare.

In ES6, invece, troviamo un considerevole numero di modifiche tecniche e stilistiche.

Ecco una panoramica di quelle più comuni e che noi tutti abbiamo almeno una volta (e sicuramente più di una volta) incontrato, e che analizzeremo a fondo nel corso di queste mini-serie.

Let

L’istruzione let consente di dichiarare una variabile con “scope” di blocco.

 var value = 10;
 // Here value is 10
 {
 let value = 2;
 // Here value is 2
 }
 // Here value is 10
 

Const

L’istruzione const è simile a let; a parte che il suo valore non può essere modificato.

{
 const x = 2;
 // Here x is 2
 }

Arrow Functions (o anche fat arrow functions)

Probabilmente la più “famosa” funzionalità di ES6. Attraverso le arrow function, siamo in grado di omettere le parentesi graffe e la dichiarazione di ritorno dovuti a ritorni impliciti (ma solo se non vi è alcun blocco).

 var timesTwo = params => params * 2
 timesTwo(4);  // 8

Ovviamente il discorso varia se la nostra funzione è in un blocco di codice come ad esempio:

let addValues = (x, y) => {
 return x + y
 }

Array Spread Operator

Array Spread Operator è semplicemente composta da tre punti: …
Permette ad un iterabile di espandersi in posti dove sono previsti argomenti 0+.

Un esempio per schiarirsi le idee:

var mid = [3, 4];
var arr = [1, 2, ...mid, 5, 6];

console.log(arr); // [1, 2, 3, 4, 5, 6]

Fanstatico!

Promise

Una Promise è la rappresentazione di un evento futuro.

const doStuff = new Promise((resolve, reject) => {
 // asynchronous stuff (i.e. XHR request, timers, ...)
 setTimeout(() => resolve('hello'), 2000);
 });
 doStuff.then(
 res => console.log(res), // hello
 err => console.log(err), // some error messages

Nel corso di questa miniserie, affronteremo con esempi pratici dettagliati alcuni delle funzionalità cardini introdotte nella versone ES6.

Ecco il mio piano per le prossime settimane:

1. Let, const, block scope, template literals, Destructuring, short object syntax
2. Perchè dovremmo usare le flat arrow functions?
3. Array Spread Operator
4. Promise
5. Module: import/export
6. Immutabilità

Se avete suggerimenti o richieste, resto a disposizione. Commentate 🙂