EcmaScript6: Javascript non sarà più lo stesso
Pubblicato il 21/04/2017
Quest’articolo ha lo scopo di fornirvi una rapida introduzione a quelle che sono le nuove caratteristiche introdotte nella versione 6 del linguaggio di programmazione ECMAScript (chiamata appunto ES6). Se non avete mai sentito parlare di questo linguaggio, avrete sicuramente sentito parlare di Javascript che è una implementazione (chiamato anche dialetto) derivante dallo stesso ECMAScript.
Naturalmente non verranno trattate tutte le nuove caratteristiche di questo linguaggio, ma quelle che sono ritenute le 10 novità più importanti. Per tutte le funzionalità di questo linguaggio di programmazione vi consiglio il link http://es6-features.org/ dove oltre un semplice elenco, troverete anche una comparazione con il precedente standard chiamato ECMAScript 5.
Parametri di default in ES6
var website = function (height, color, url) {
var height = height || 50
var color = color || 'green'
var url = url || 'http://www.google.com'
...
}
Prima, per definire dei parametri di default in una funzione bisognava ricorrere all’uso del doppio pipe ‘||’ che sta ad indicare l’operatore logico OR. In questa maniera si evitava che una funziona venisse chiamata con variabili non avvalorate e che quest’ultime, utilizzate all’interno della funzione stessa, portassero ad un qualche errore non valutato. Ora più semplicemente si può scrivere direttamente all’interno delle parentesi di passaggio delle variabili, alcuni valori di default, come in molti altri linguaggi di programmazione che già lo fanno, per esempio Ruby.
var website = function(height = 50, color = 'green', url = 'http://www.google.com') {
...
}
Stringhe multi-linea in ES6
Un’altra caratteristica molto utile è la possibilità di scrivere stringhe multi-linea direttamente nelle variabili usando l’apice inverso (backtick) ‘ ` ‘. In ES5 bisognava scrivere
var poem = 'I push me beyond my limits,\n\t'
+ ' and I feel fully live my own life. \n\t'
+ ' In you I met myself and I looked over, beyond unimaginable limits,\n\t'
+ ' I looked deep into your eyes, trying to understand you, \n\t'
+ ' but I saw everything about me, I never wanted to see. \n\t'
var claim = 'You have the right to be you.\n\ You can only be you when you do your best.'
Invece ora in ES6 si potrà scrivere tutto più facilmente grazie al backtick. Naturalmente sarà facilitato chi ha la tastiera americana. Infatti l’apice inverso non è presente sulle tastiere italiane. Per far comparire l’apice inverso, bisognerà digitare ALT + 096.
var poem = `I push me beyond my limits,
and I feel fully live my own life.
In you I met myself and I looked over, beyond unimaginable limits,
I looked deep into your eyes, trying to understand you,
but I saw everything about me, I never wanted to see. `
var claim = `You have the right to be you.
You can only be you when you do your best.`
Assegnamento destrutturato in ES6
Quando si parla di assegnamento destrutturato? Il concetto di assegnamento destrutturato si ha quando una variabile ha proprietà multiple. Un esempio può essere
var data = $('body').data(), // data ha proprietà car e mobile
car = data.car,
mobile = data.mobile
In ES6, noi possiamo sostituire questo codice con il seguente. In questa maniera saranno assegnati automaticamente i valori di data.car e data.mobile alle due variabili con i rispettivi nomi.
var {car, mobile} = $('body').data()
Funzioni a freccia in ES6
Una funzione a freccia ha una sintassi più compatta rispetto alla notazione a funzione e non associa i propri this, arguments, super, or new.target. Le funzioni a freccia sono sempre anonime. Questa notazione è maggiormente indicata per le funzioni che non sono metodi e non possono essere usate come costruttori.
Con l’introduzione delle funzioni freccia in ES6 si potrà finalmente avere lo stesso concetto di ‘ this ‘ anche all’interno delle funzioni anonime. Infatti prima bisognava assegnare ad una variabile globale il valore di this per utilizzarlo all’interno delle funzioni anonime. Invece ora è possibile utilizzare il costrutto this direttamente nelle funzioni freccia.
Per esempio questo codice in ES5:
var _this = this
$('.btn').click(function(event){
_this.sendData()
})
In ES6 sarà simile ma senza la necessità di effettuare l’assegnazione _this = this
$('.btn').click(
(event) =>{
this.sendData()
}
)
L'introduzione delle funzioni a freccia è stata influenzata da 2 fattori: sintassi più compatta e la non associazione di this.
Promises in ES6
Nel tempo ci sono state un sacco di implementazioni delle “Promise” con differenti librerie che estendessero il più comune linguaggio Javascript. In Ecma Script 6 è stato inserito un metodo standardizzato per utilizzare le Promise.
Consideriamo un esempio abbastanza banale di esecuzione asincrona ritardata con la funzione setTimeout() in ES5 :
setTimeout(function(){
console.log('Hello World!')
}, 1000)
Possiamo riscrivere il codice in ES6 con Promise in questa maniera:
var hello1000 = new Promise(function(resolve, reject) {
setTimeout(resolve, 1000)
}).then(function() {
console.log('Hello World!')
})
O direttamente con le funzioni freccia in quest’altra maniera:
var hello1000 = new Promise((resolve, reject)=> {
setTimeout(resolve, 1000)
}).then(()=> {
console.log('Hello World!')
})
Costrutti LET e CONST per lo ‘scope’ dei blocchi di codice
Per definire un blocco di codice in genere noi utilizziamo le parentesi graffe. Quando andiamo a definire una variabile attraverso ‘var’ all’interno di una funzione, essa ha come “scope” l’intera funzione. Per esempio nella seguente funzione in ES5
function calculateTotal (drop) {
var price = 0
if (drop) {
var price = 1
}
{ // aggiungiamo altri blocchi di codice!
var price = 100
{
var price = 1000
}
}
return price
}
console.log(calculateTotal(true))
il risultato di questo pezzo di codice sarà 1000. Perché l’ambito d’azione del costrutto “var” è l’intera funzione!
In ES6 si può usare ‘ let ‘ per restringere lo scope delle variabili ai soli blocchi di codice e non all’intera funzione.
function calculateTotal (drop) {
let price = 0
if (drop) {
let price = 1 // il primo price è ancora 0
}
{ // aggiungiamo altri blocchi di codice!
let price = 100 // il primo price è ancora 0
{
let price = 1000 // il primo price è ancora 0
}
}
return price
}
console.log(calculateTotal(true))
Il risultato di questa funzione invece sarà 0. Questo risultato lo abbiamo perché anche il blocco dell’ IF al suo interno utilizza il costrutto “let”. Se l’ IF non avesse avuto il “let” ma l’istruzione fosse stata semplicemente “price = 1” il risultato di questo segmento di codice sarebbe stato 1.
Anche per quanto riguarda i dati dichiarati con il costrutto CONST, abbiamo come per il LET la caratteristica di block-scoped ma oltre questa il dato è anche immutabile. Infatti con CONST possiamo dichiarare una costante, che è valida solamente tra le parentesi graffe in cui è dichiarata.
Nel seguente codice potrete vedere una funzione identica a quella di prima che restituisce 0 come valore, ma con costanti invece di variabili di tipo LET.
function calculateTotal (drop) {
const price = 0
if (drop) {
const price = 1 // non va in conflitto con la prima perché ha scope diversi
}
{ // aggiungiamo altri blocchi di codice e quindi altri scope
const price = 100 // stessa costante, altro scope
{
const price = 1000 // stessa costante, altro scope ancora
}
}
return price
}
Classi in ES6 - 9
Le classi JavaScript introdotte in ECMAScript 6 non aggiungono nulla di nuovo rispetto alla prassi consolidata in JavaScript di creare oggetti basati su funzioni. Infatti class è solo una semplificazione sintattica per continuare a creare oggetti nel solito modo. Non si tratta dunque dell’introduzione di veri e propri costrutti di programmazione orientata agli oggetti, ma di semplificazioni sintattiche che acquisiscono e rendono più facile l’uso di pattern OOP.
Vediamo alcuni esempi di codice per capire meglio:
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
get area() {
return this.calcArea()
}
calcArea() {
return this.height * this.width;
}
static rectSum(a, b) {
const area1 = a.area();
const area2 = b.area();
return area1+area2;
}
}
Modules in ES6 - 10
In ES5 non c’era la possibilità di utilizzare i moduli in maniera nativa. Adesso con la nuova versione di Ecma Script possiamo finalmente dichiarare dei moduli utilizzando gli operandi ‘import’ and ‘export’.
module "Service" {
export function create(value) {
...
}
export function transform(value) {
...
}
function randomValue() {
...
}
}
In questo esempio stiamo dichiarando un Modulo chiamato ‘Service’ che espone due funzioni ‘create’ e ‘transform’, mentre la funzione ‘randomValue’ rimane privata all’interno del modulo stesso.
Per utilizzare questo modulo e le sue funzionalità all’interno del nostro codice possiamo utilizzare la keyword ‘import’.
import * as serv from "Service"
import transform from "Service"
import {create, transform} from "Service"
Template literals in ES6
Le “stringhe template” sono stringhe che permettono di incorporare al proprio interno espressioni. Le stringhe template possono contenere al proprio interno dei segnaposti, indicati con il segno del Dollaro, che vengono processati da una funzione che va a sostituire il risultato convertendolo in una stringa e concatenandolo al resto.
var a = 5;
var b = 10;
console.log(`Quindici è ${a + b} e\n non ${2 * a + b}.`);
// output Quindici è 15 e
// non 20
For…of statement
Il ciclo For…of crea un loop di iterazione su un oggetto iterabile come può essere un array o un dato di tipo String. In questa maniera si riescono a maneggiare i valori dell’oggetto su cui stiamo iterando avendo un’analogia diretta con il più famoso For..each.
Andiamo a vedere un semplice esempio:
let numbers = [10, 20, 30];
for (let value of numbers) {
value += 1;
console.log(value);
}
// 1° output 11
// 2° output 21
// 3° output 31
Il for..of può interrompere l’esecuzione dell’iterazione attraverso uno dei costrutti break, continue, throw or return.
▸▸▸ Se questo genere di argomento vi appassiona cliccate su questo link per avere tutte le informazioni sul nostro coding bootcamp di 10 settimane che forma sviluppatori software di alto livello.
