NewsCorso di programmazioneProfessione webTech

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

Mini guida su ES6 - Semplifica i tuoi applicativi JS - Intro 1

Ciao a tutti. Eccomi con 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.

Mini guida su ES6 - Semplifica i tuoi applicativi JS - Intro 2
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 🙂

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 <<