Le novità di ES6 (o ECMAScript2015) che puoi usare oggi

Gli aggiornamenti nel web sicuramente non mancano ma ce n’è uno in particolare che dovrebbe interessarti da vicino e questo è la nuova sintassi che è stata introdotta con ES6 (o ECMAScript2015). Sai già di cosa sto parlando? Prova a leggere questo articolo e poi dimmi nei commenti quante cosa ti eri perso 😉

Non voglio partire con il piede sbagliato e onestamente spero che tu non ti sia offeso per la piccola provocazione che ti ho appena lanciato, ma ritengo veramente importante scatenare la tua curiosità perché gli aggiornamenti della sintassi che sono stati introdotti con ES6 (ECMAScript2015) sono veramente molto importanti e hanno portato un sacco di novità all’interno di questo linguaggio rendendolo più moderno e, incredibilmente, più semplice da comprendere.

Ti ricordi perché sto scrivendo ES6 (ECMAScript2015)? Avrei potuto anche scrivere ES2015 per quello che vale…

Anche se ho dedicato un intero articolo sulle versioni cerchiamo di iniziare questo con il giusto presupposto: negli ultimi anni c’è stato un incredibile casino nei nomi che vengono dati agli aggiornamenti della sintassi JavaScript.

La cosa importante da sapere è che dal 2015 in poi il nome standard per identificare la sintassi di questo linguaggio è diventato ECMAScript[anno], che è possibile abbreviare come ES[anno]. Data però la confusione di nomi e il fatto che io non posso sapere come cercheranno questo argomento i lettori che provengono dai motori di ricerca, per il resto dell’articolo continuerò a utilizzare in modo intercambiabile le seguenti: ES6, ECMAScript2015 e ES2015.

Adesso che abbiamo messo da parte i problemi semantici, cerchiamo di capire anche perché devi continuare a leggere questo articolo. Nelle prossime sezioni parleremo delle novità introdotte da questa sintassi, ma perché ti dovrebbe interessare?

La risposta semplice è: perché d’ora in avanti all’interno di questo blog troverai questa sintassi.

Se poi vogliamo dare una definizione più generale e che si estende anche al resto del web, le motivazioni potrebbero essere molte ma la principale di tutte è: la nuova sintassi e le nuove funzionalità di questo linguaggio sono qua per restare, è meglio che tu impari le possibilità che hai a disposizione prima di scrivere codice vecchio!

Quanto è sicuro scrivere codice ES6 (o ECMAScript 2015) oggi?

Se negli ultimi tempi ti sei incuriosito nei confronti di questa sintassi e ti sei trovato a leggere diversi articoli che annunciavano il suo avvento ti sarai accorto che oltre al casino scatenato nel nome, molti sviluppatori si sono preoccupati molto anche per la compatibilità che questo codice avrebbe avuto con i browser.

Ormai è un dato di fatto, esce una nuova funzionalità e i browser impiegano mesi (se non anni) a stare al passo con i tempi.

Quanto ho appena affermato non è del tutto vero, negli ultimi anni abbiamo visto un forte impegno da parte degli sviluppatori nella implementazione delle nuove funzionalità. È successo per HTML5 così come per le Grid CSS (il 2017 sarà il loro anno 😉 ) e la stessa cosa sta avvenendo per ES6 (o ECMAScript2015).

Se ci guardiamo intorno alla ricerca di qualche corso su ES6 (o ECMAScript2015) pubblicati nel 2015 vedremo che molto spesso le persone hanno fatto riferimento a strumenti in grado di tradurre questa nuova sintassi in ES5 (qua non c’è alternativa al nome perché vale il vecchio standard), lo strumento più utilizzato è stato Babel.

Se invece osserviamo la tabella di comparazione per ES6 (o ECMAScript2015) notiamo con piacere che tutti i browser moderni, compreso Microsoft Edge (lo so sembra incredibile), hanno un’implementazione che supera tranquillamente il 90% delle funzionalità presenti nel linguaggio.

Con queste statistiche si capisce subito che la completa implementazione è soltanto una questione di tempo (con mio immenso stupore Safari è già al 100%) e dato che la nuova sintassi si presenta come molto più potente e pulita non riesco a trovare una buona ragione per non trattare questo argomento.

Tu ne hai qualcuno? Lascia un commento che ci facciamo una bella chiacchierata ?

Le novità da conoscere di ES6 (ECMAScript2015)

Lo so che ormai sei stanco di leggere doppio tutte le volte, ma in fin dei conti non è colpa mia se si è creata questa confusione. Quello che sto cercando di fare io in questo contesto è offrire a più persone possibili presenti e future (se pensiamo a chi arriva dai motori di ricerca) delle informazioni utili per il proprio lavoro.

Tornando però all’argomento principale di questo articolo, ovvero alle novità introdotte da questa nuova sintassi JavaScript, c’è da dire che c’è stata una vera e propria rivoluzione nella gestione di questa sintassi. Ti basta andare a vedere un sito come ES6 Features per vedere con i tuoi occhi la lista delle nuove soluzioni che oggi possiamo utilizzare, o almeno molte di queste.

Dal mio punto di vista, per quanto sia interessante vedere due sintassi a confronto come succede nel sito indicato precedente, tutto mi sembra fuori contesto e non avere qualcuno che mi spiega le singole differenze rende la comprensione ancora più difficile.

Ecco quello che voglio fare per te oggi. Se me lo permetti, sarò la tua guida che ti presenta le novità di ES6 (o ECMAScript 2015).

Definiamo le variabili con maggiore precisione

Iniziamo con il definire uno degli elementi fondamentali di qualsiasi linguaggio di programmazione, le variabili.

Da sempre queste sono in grado di facilitarci il lavoro perché al posto di doversi ricordare strani o complessi valori, come il valore di PiGreco che usiamo come esempio all’interno del corso dedicato a JavaScript, ci aiutano a sfruttare la nostra debole memoria creando dei nomi facili da ricordare che possiamo richiamare all’interno del nostro programma.

In JavaScript dichiarare una variabile è sempre stato molto semplice, come presentato nel blocco di codice seguente, o si fa uso della parola chiave var o si omette. Niente di più.

var nome = "Andrea"; 
cognome = "Barghigiani";

Fino a oggi, creare le proprie variabili in questo modo non ha causato molti problemi. Beh a dire il vero di problemi ne ha sempre causati perché l’errore più grosso che viene fatto, soprattutto all’interno di applicazioni di un certo livello, è dato dalla difficoltà di specificare la variabile per un determinato scope.

Saper padroneggiare lo scope è una caratteristica molto importante in programmazione, soprattutto con il paradigma di programmazione orientata agli oggetti dove questo concetto ha un valore fondamentale, ma con JavaScript (o meglio con la sintassi ES5) si è sempre rischiato di fare un errore di questo tipo:

function prova(){ 
	provaVar = 1; 

	for( var i = 0; i < 5; i++ ){ 
		var provaVar = i; 
		console.log( provaVar ); 
	} 

	console.log( provaVar + " qualcosa non torna" ); 
} 

prova();

In questo semplice esempio quello che stiamo facendo è creare una variabile globale che dovrà essere disponibile per tutta la funzione prova() dal nome provaVar per poi dichiarare una seconda variabile, alla quale abbiamo dato lo stesso nome (magari per sbaglio), all’interno del for che abbiamo inserito.

In altri linguaggi di programmazione questo non avrebbe causato un problema perché la seconda variabile provaVar viene compresa come variabile che ha la visibilità dedicata al ciclo for, ma se proviamo a eseguire questo blocco di codice all’interno del nostro browser notiamo qualcosa di strano all’interno della console.

Nella seconda chiamata, la stringa che è stata messa in evidenza, al posto di avere console.log() che restituisce il valore 1 abbiamo il valore 4 che è quello che è stato calcolato all’interno del ciclo for.

Questo è un problema fin troppo comune all’interno delle applicazioni JavaScript, per anni gli sviluppatori hanno picchiato la testa al muro cercando di risolverlo perché bastava un piccolo errore di distrazione e sarebbe stato necessario studiare centinaia (se non migliaia) righe di codice per scoprire l’errore.

Per fortuna che con ES6 (o ECMAScript2015) questo non è più un problema e abbiamo non una ma ben due soluzioni disponibili.

La più semplice di tutte è quella di usare una parola chiave diversa rispetto a var che ci permette di dichiarare una variabile, ma al tempo stesso ci aiuta a rispettare lo scope in cui viene dichiarata. Questa parola magica è let.

function prova(){ 
	let provaVar = 1; 
	
	for( var i = 0; i < 5; i++ ){ 
		let provaVar = i; 
		console.log( provaVar ); 
	}
	 
	console.log( provaVar ); 
} 

prova();

Utilizzando questa semplice parola per creare le nostre variabili non ci sono più problemi, basterà controllare la nostra console per vedere che, finalmente, i valori delle variabili dichiarate all’interno del nostro codice rispettano il corretto scope.

Questa è sicuramente una cosa molto interessante e in futuri articoli e corsi la descriveremo più nel dettaglio, ma nonostante l’esempio che ti ho appena fatto voglio mettere in chiaro una cosa: utilizzando let stiamo comunque dicendo al nostro browser che abbiamo creato una variabile il cui valore potrà cambiare durante l’esecuzione del programma.

Ho voluto chiarire questo concetto perché il secondo modo con il quale possiamo dichiarare una variabile è leggermente più restrittivo. Non permette, infatti, di riallocare il valore che abbiamo assegnato alla variabile, anche se non corretto al 100% diciamo che stiamo creando una costante.

E quale potrà essere la parola chiave ideale per creare delle costanti in JavaScript se non const?

Tutte le variabili che creiamo con const seguono le stesse regole di scope che abbiamo già scoperto per let quindi una cosa del genere può essere scritta senza problemi:

function prova(){ 
	const provaVar = 1; 

	for( var i = 0; i < 5; i++ ){ 
		const provaVar = i; 
		console.log( provaVar ); 
	} 

	console.log( provaVar ); 
} 

prova();

Il codice che abbiamo appena scritto funziona correttamente e se provi a eseguirlo all’interno del tuo browser otterrai in output gli stessi valori che ti ho mostrato nell’immagine precedente, ma è con il seguente blocco di codice che andremo a ottenere degli errori:

const nome = "Andrea";
const nome = "Pippo"; //Errore di sintassi
const cognome; //Errore di sintassi

Con queste poche righe di codice siamo già cascati in due errori distinti. Il primo errore di sintassi che ho inserito riguarda il nostro tentativo nella modifica del valore assegnato alla variabile nome, dato che abbiamo utilizzato la parola chiave const questa non permette la modifica del riferimento al valore assegnato.

Il secondo errore è simile ma parte da un presupposto diverso. Dato che una costante non può avere un valore assegnato dopo la sua dichiarazione, ecco che dichiarare soltanto il nome di una costante sarebbe un errore perché in fin dei conti non ci sarebbe un’altra occasione per assegnare un valore.

Destructoring dei tuoi valori

Ho deciso di utilizzare questa strana parola in inglese all’interno del titolo di questa sezione perché la sua traduzione italiana più vicina sarebbe: destrutturare.

Come spesso capita quando si cerca di studiare un linguaggio di programmazione e le sue funzionalità, tradurre i suoi termini nella nostra lingua il risultato rasenta l’orribile. Spero che tu non ti voglia fermare su questa piccolezza perché le potenzialità offerta dal destructoring (d’ora in avanti utilizzeremo il termine in inglese) aiutano veramente molto a semplificare il nostro codice e a renderlo ancora più leggibile.

Cerchiamo di capire subito questa funzionalità andando ad analizzare una delle sintassi più brutte che abbiamo utilizzato nell’ultimo decennio:

const persona = { 
	nome: "Andrea", 
	cognome: "Barghigiani", 
	stato: "Italia", 
	citta: "Roma", 
	twitter: "@Andrea_AndMore" 
} 

const nome = persona.nome; 
const twitter = persona.twitter;

Se sviluppi in JavaScript da un po’ di tempo sono sicuro che troverai questa sintassi molto comune, in fin dei conti non stiamo facendo altro che utilizzare le proprietà di un oggetto (potrebbe anche provenire da un JSON) e di inserirle all’interno di variabili che utilizzeremo nel nostro codice. Fin qua sembra che sia tutto a posto e che non ci siano soluzioni migliori.

Ed ecco invece che il destructoring ci permette di rivoluzionare le cose:

const { nome, cognome, twitter } = persona;

L’oggetto che stiamo utilizzando è sempre quello dell’esempio precedente, la nostra persona, ma come puoi notare la sintassi per estrapolare i valori contenuti nelle sue proprietà è cambiata. In questo caso stiamo utilizzando le parentesi graffe prima dell’operatore di assegnazione (=) che viene seguito soltanto dall’oggetto dal quale vogliamo estrapolare le informazioni.

La cosa importante da capire è che possiamo richiamare le singole proprietà senza neanche rispettare l’ordine in cui sono state dichiarate all’interno dell’oggetto, come succede per esempio con twitter. Dopo aver eseguito il destructoring del nostro oggetto avremo a disposizione del nostro programma le variabili nome, cognome e twitter.

Se per qualche motivo non ci piacciono i nomi che verranno dati alle nostre variabili, possiamo sempre rinominarli come nel prossimo esempio:

const { nome: n, cognome: c, twitter: t } = persona;

Andando contro qualsiasi legge sulla leggibilità al posto di avere dei nomi lunghi per le proprietà che abbiamo estrapolato dal nostro oggetto, utilizzando i due punti (:) possiamo specificare alla loro destra il nome che vogliamo dare alla nostra variabile.

console.log( c ); //Barghigiani

Ci sono altri aspetti interessanti che riguardano il decostructoring che andremo ad affrontare in futuri articoli o magari in un corso dedicato, prima di passare alla prossima novità però vorrei esporre una domanda che probabilmente ti sei già posto da solo.

Il decostructoring funziona soltanto con gli oggetti? Assolutamente no!

Questa tecnica può essere utilizzata con qualsiasi tipo di dato complesso, quindi oltre agli oggetti che abbiamo già visto è possibile estrarre i valori da array, mappe e sets. Se questi ultimi due valori non ti sono molto chiari reggiti forte perché sono alcune tra le novità più rivoluzionarie della nuova sintassi JavaScript.

Finalmente gestiamo con classe le nostre stringhe

Ebbene sì, finalmente siamo giunti a un punto in cui gestire le nostre stringhe è diventato veramente un piacere! Se non hai presente a cosa sto facendo riferimento, osserviamo assieme la seguente stringa:

const testo = "Ciao, il mio nome è " + nome + " e vivo in " + citta + ". Su Twitter mi trovi con " + twitter +".";

Noti niente di strano? Probabilmente no perché in fin dei conti questa sintassi è molto comune ma già a guardarla ora apre le porte a un’infinità di problematiche. Anche se la colorazione della sintassi oggi ci aiuta molto, utilizzando una struttura come la precedente è molto semplice dimenticarsi un simbolo di concatenazione, uno spazio o anche uno dei doppi apici.

Sicuramente non è una sintassi che ci aiuta a essere più efficienti! Come risolvere?

Un primo tentativo è stato fatto dall’utente GitHub alexei che ha creato la libreria JavaScript sprintf.js grazie alla quale, emulando il comportamento delle funzione C++, possiamo dare un ordine migliore alle nostre stringhe scrivendo un codice più compatto:

const testo = sprintf( "Ciao, il mio nome è %s e vivo in %s. Su Twitter mi trovi con %s", nome, citta, twitter);

Come puoi notare, utilizzare questo tipo di funzione ci aiuta molto perché non dobbiamo usare simboli di concatenazione e non dobbiamo neanche preoccuparci degli spazi che utilizziamo, tutto è inserito all’interno della stessa stringa.

Allo stesso tempo stiamo sempre usando una libreria esterna, possibile che non ci sia una soluzione integrata?

Come ti puoi immaginare la mia domanda è retorica perché grazie alla sintassi ES6 (o ECMAScript2015) abbiamo la possibilità di semplificare ulteriormente la nostra sintassi e senza l’aiuto dei caratteri speciali come \n possiamo mandare a capo il nostro testo! La sintassi è incredibilmente semplice ma come scoprirai nel prossimo esempio dobbiamo stare attenti a una cosa in particolare:

const testo = `Ciao, il mio nome è ${nome} e vivo in ${citta}. Su Twitter mi trovi con ${twitter}`;

Ci sono due cose importanti che voglio farti notare in questo esempio:

• la prima è che non stiamo usando un semplice apice ma il carattere backtick, è un carattere molto particolare e probabilmente alla sua vista ti sarai ricordato che è lo stesso carattere usato in MarkDown per creare un blocco di codice (questo è il mio metodo personale per ricordarmi il suo significato, se ne hai uno differente non dimenticarti di specificarlo nei commenti)
• altra caratteristica speciale delle template per stringhe in ES6 (o ECMAScript2015) è la presenza del blocco ${} che permette di includere il valore contenuto in una variabile. Se hai seguito il nostro corso dedicato a Sass hai già incontrato questa caratteristica quando abbiamo incluso la libreria Compass, quindi non dovrebbe essere troppo difficile da ricordare 😉

Come puoi vedere con i tuoi stessi occhi la sintassi adesso è molto più semplice e diretta, ma come dicevo prima non è l’unica novità che porta questo aggiornamento di sintassi perché se desidero andare a capo mi basterà scrivere qualcosa del genere:

const testo = `Ciao, il mio nome è ${nome} e vivo in ${citta}. 
Su Twitter mi trovi con 
${twitter}`;

Maggior ordine e logica grazie alle Arrow Function

Se ti dovessi chiedere qual è il costrutto che ti velocizza maggiormente quando scrivi in un qualsiasi linguaggio di programmazione, sono sicuro che stai puntando il dito verso le funzioni!

Ormai dovrebbe essere abbastanza chiaro che l’uso delle funzioni all’interno dei nostri programmi è una funzionalità che ci permette di ripetere in automatico delle azioni che altrimenti avremmo dovuto scrivere noi ogni singola volta, basta pensare alle funzioni come console.log() o alert() senza le quali saremmo costretti a scrivere ogni volta il codice che inserisce i valori nella console o che mostra un popup all’interno del browser.

Con le precedenti, ho forse rinfrescato la tua memoria sulle funzioni che sono incluse all’interno di JavaScript, ma c’è un altro aspetto del quale sono molto utili e riguarda la possibilità di definire le nostre funzioni senza dover ripetere il nostro codice. Iniziamo con un esempio molto classico, la creazione di una funzione somma() che permette, appunto, di sommare due valori:

var somma = function(a, b){ 
  return a + b; 
}

Questo blocco di codice è sicuramente uno tra i più comuni che vengono utilizzati all’interno di qualsiasi esempio e mi serve per mostrarti dove le arrow function possono dare il meglio, soprattutto in questo caso dato che il corpo della funzione viene descritto da una singola riga di codice e utilizza la parola return.

In base a queste specifiche possiamo trasformare la precedente funzione nella seguente arrow function:

let somma = (a, b) => a + b;

A parte aver risparmiato qualche riga di codice e l’utilizzo di alcuni caratteri aggiuntivi, questo tipo di sintassi risulta veramente comodo quando andiamo a utilizzare questa nuova sintassi all’interno di una callback.

Purtroppo stiamo andando un po’ lunghi in questo articolo quindi se ti ho lasciato con la saliva in bocca non esitare a commentare l’articolo chiedendo un approfondimento su questo concetto, potresti invogliarmi  a scrivere un corso completo su tutte le nuove funzionalità introdotte da ES6 (o ECMAScript2015).

La sintassi delle classi è stata completamente rivista

Iniziamo quest’ultima sezione con una mia confessione: tutto quello che so sullo sviluppo web (inteso come utilizzo dei linguaggi di programmazione) proviene dalla sintassi PHP e il modo in cui JavaScript gestisce la creazione di una classe mi ha sempre portato un sacco di grattacapi.

La differenza principale tra questi due linguaggi è che il primo, così come il C++, utilizza una sintassi ispirata al linguaggio Simula67 dove le proprietà e i metodi dell’oggetto vengono dichiarate all’interno del blocco di codice che definisce la classe stessa. JavaScript invece basa la sua sintassi sull’uso di prototype e la cosa mi ha sempre confuso.

Mi sono sempre chiesto: ma che cosa è questo prototipo?

Per chi invece ha iniziato a lavorare con JavaScript senza passare da altri linguaggi la dichiarazione delle classi risulta molto intuitiva perché, in fin dei conti, se devo creare una classe Auto (quanta fantasia vero?) posso seguire questa sintassi:

function Auto(){ 
	//Costruttore 
} 

Auto.prototype.accelera = function (){}; //Metodo 
Auto.protorype.frena = function(){}; //Metodo

Seguendo la logica JavaScript questo blocco di codice può risultare molto intuitivo perché non sono obbligato a mantenere una determinata struttura e posso estendere la mia classe con qualsiasi metodo in qualsiasi momento desideri. Allo stesso tempo questa sintassi presenta delle lacune che hanno portato alla creazione di un sacco di librerie all’interno delle quali la creazione di una classe veniva dichiarata nei modi più diversi.

Oggi con ES6 (o ECMAScript2015) questo non è più necessario e possiamo utilizzare la seguente sintassi:

class Auto{ 
	constructor(){ 
		//Costruttore 
	} 

	accelera(){ 
		//Metodo 
	} 

	frena(){ 
		//Metodo 
	} 
} 

const auto = new Auto(); 
auto.accelera();

Personalmente trovo questa nuova sintassi molto più intuitiva, infatti rispecchia quella presente in PHP, e la ritengo anche molto più ordinata. A parte queste considerazioni personali, bisogna dire che anche la sintassi per creare delle sottoclassi si è semplificata molto ed è possibile ereditare facilmente tutti i metodi dichiarati nella classe genitore, praticamente tutto viene ereditato in modo automatico!

Conclusioni

Con questi primi cinque punti abbiamo soltanto toccato la superficie delle modifiche che ES6 (o ECMAScript2015) ha portato nella vita di qualsiasi sviluppatore JavaScript, ma ci sono molti altri concetti che vorrei approfondire come i generatori, le mappe, gli iteratori, le promises…

Insomma, c’è veramente molto che possiamo discutere e che possiamo già iniziare a utilizzare perché, come abbiamo visto precedentemente, la compatibilità è già molto alta e dato che il TC39 (praticamente quelli che decidono quale sia la sintassi e le funzionalità in ECMAScript) hanno già rilasciato ES2016 e stanno discutendo le funzionalità da includere per il rilascio di ES2017 non possiamo perdere altro tempo.

I prossimi anni saranno molto importanti per l’ecosistema JavaScript perché esistono molti articoli che parlano di come sia difficile imparare questo linguaggio al giorno d’oggi, il numero di librerie e framework presenti hanno superato di gran lunga il numero per qualsiasi altro linguaggio di programmazione e senza girarci troppo intorno ti dico subito che c’è un sacco di confusione.

Ovviamente non potevo sperare di presentare tutte le nuove funzionalità in un singolo articolo, ti ho già trattenuto per oltre 4000 parole e se non te ne sei accorto le informazioni che ti ho passato sono veramente molte!

Personalmente, osservando tutte queste novità mi sento emozionato e non vedo l’ora di tornare a descriverti – magari anche più nel dettaglio – le caratteristiche e le funzionalità introdotte da questa nuova fantasica sintassi. Sto proprio pensando di creare un corso dedicato, un corso che ti aiuterà anche a creare più facilmente le tue applicazioni web e mobile, ma prima di scrivere anche soltanto la scaletta vorrei sapere da te una cosa: sei interessato a questo corso?

Già in questo articolo ti ho presentato alcuni dei nostri corsi più famosi e ormai non dovrebbe essere un segreto, noi di SkillsAndMore amiamo condividere le nostre conoscenze e ci piace aiutarti nel migliorare le tue. Però se non sei interessato a un corso su ES6 (o ECMAScript2015) mi sembra inutile spendere decine di ore nella creazione di tutto il materiale. I nostri corsi si distinguono dalla concorrenza e non voglio sprecare tempo per parlartene, presto pubblicherò una pagina che ti permetterà di capire meglio perché ne sono così sicuro.

Tornando a te: come puoi farmi capire che sei interessato a questo corso?

La risposta è semplicissima, commenta questo stesso articolo o usa il modulo contatti in fondo alla pagina per farmi capire quali sono le tue aspettative e che cosa desideri ottenere da un corso di questo tipo. Questo mi aiuterà moltissimo a delineare un percorso di apprendimento il più utile e completo possibile.

Stai ancora leggendo e non hai commentato? Fallo ora!

Se poi hai trovato utile questo articolo e ritieni che le informazioni contenute siano interessanti e utili a costruire un web migliore, perché non lo condividi? Ogni singola condivisione è incredibilmente importante sia per la crescita di questo blog che per quella dei suoi lettori.

Non fare il tirchio e clicca sul bottone del tuo social network preferito 😉