ECMAScript 6, ECMAScript 2015

ES6, ormai riconosciuto come ECMAScript 2015, è la nuova versione dello standard a cui si rifà il linguaggio Javascript ed è stato rilasciato il 17 Giugno di questo anno (http://www.ecma-international.org/ecma-262/6.0/).

È stato chiamato ECMAScript 2015 poiché è intenzione dell'organizzazione ECMA International rilasciare una nuova versione ogni anno: infatti il rilascio di ES7 o ECMAScript 2016 è previsto per metà dell'anno prossimo (http://www.infoq.com/news/2015/06/ecmascript-2015-es6).

La versione di Javascript più supportata attualmente è quella che fa riferimento a ECMAScript 5, rilasciato nel 2009 e che nel tempo è stata ampliata di numerose funzionalità.

Features

ES6 fornisce un nuovo mondo di funzionalità, tra cui la possibilità di utilizzare Javascript come linguaggio a oggetti, sempre pur mantenendo la sua caratteristica principale: la prototipizzazione.

Costanti

È stata introdotta una nuova parola chiave per definire le costanti: const

Con const l'elemento potrà essere soltanto letto ma non modificato.

const PI = 3.141593

let

Con la nuova parola chiave let è possibile isolare la definizione di variabili al blocco corrente, evitando di sovraccaricare la memoria. Alla chiusura del blocco le variabili dichiarate con let saranno rimosse dal garbage collector.

for (let i = 0; i < 10; i++) {
  console.log(i) // 0 1 2 3 ... 9
}

console.log(i) // ReferenceError: i is not defined

Nuove closure

In ES5 per isolare lo scope di una funzione era necessario usare le closure (function () {})(), mentre con ES6 è possibile usare i blocchi delimitati dalle parentesi graffe {} come ambienti isolati.

{
  function num() {return 1}
  {
    function num() {return 5}
    console.log(num()) // 5
  }
  console.log(num()) // 1
}

Arrow functions

In Javascript le funzioni anonime sono uno dei costrutti più utilizzati ma ogni volta richiedono un minimo di boilerplate, ossia di scrittura di codice ripetitivo.

Con le arrow function di ES6, scrivere funzioni anonime diventa una passeggiata.

var numbers = [0,1,2,3,4]
var increments = numbers.map(num => ++num) // [1,2,3,4,5]

Nuova gestione dei parametri

Una grande mancanza delle versioni precedenti di JS riguarda i parametri delle funzioni.

Con ES6 è possibile inizializzarli con un valore di default, è possibile raggruppare una lista di parametri in uno solo ed è anche possibile trasformare un array in una lista di parametri.

// Default Params
function sum(x = 10, y = 20) {
  return x + y
}

console.log(sum()) // 30

// Rest Params
function sum(x, y, ...abc) { // ...abc = [30,40,50]
  let total = abc.reduce((a,b) => a + b) // 30+40+50 = 120
  return x + y + total // 10 + 20 + 120 = 150
}

console.log(sum(10, 20, 30, 40, 50)) // 150

// Spread Operator
let people = ['foo', 'bar', 'jar']
let others = ['pippo', 'pluto', ...people]
let numbers = [1,2,3,4,5]

console.log(sum(...numbers)) // 15

Template string

ES6 introduce le template string, ossia stringhe che permettono l'inclusione di variabili e valori, evitano così la tradizionale concatenazione di stringhe.

let sentence = `
  multiline string
  with tabulation
  and carriage returns
`

console.log(sentence)

let name = 'Mario'
let template = `hello ${name}`

console.log(template) // hello Mario

Nuovi metodi proprietà

I metodi proprietà degli oggetti assumono una nuova firma, riducendo l'ammontare di codice da scrivere.

let person = {
  introduce() {
    console.log('My name is Mario')
  },
  ['say' + 'My' + 'Name']() {
    console.log('Mario')
  }
}

person.introduce() // My name is Mario
person.sayMyName() // Mario

Destrutturazione

A volte può essere necessario ritornare più di un valore e di salvare tali valori in più variabili o in oggetti complessi: tramite la destrutturazione è possibile risparmiare codice e tempo nell'assegnazione di più risultati di ritorno dall'esecuzione di una funzione.

function people() {
  return ['foo', 'bar', 'jar']
}

let [personFoo, personBar, personJar] = people()
console.log(personFoo, personBar, personJar) // foo bar jar

Classi

Seguendo lo stille della programmazione orientata agli oggetti, ES6 introduce il nuovo sistema di classi. Questo permette di creare ed estendere classi, mantenendo però la struttura prototipata di ES5.

class Person {
  constructor(name, surname) {
    this.name = name
    this.surname = surname
  }
  
  introduce() {
    console.log(`Hi, my name is ${this.name} ${this.surname}`)
  }
  
  static type() {
    console.log("I'm a Person")
  }
}

class Developer extends Person {
  constructor(name, surname, skill) {
    super(name, surname) // Person.constructor
    this.skill = skill
  }
  
  introduce() { // override
    console.log(`Hi, my name is ${this.name} ${this.surname} and I know ${this.skill}`)
  }
}

let mario = new Person('Mario', 'Bros')
mario.introduce() // Hi, my name is Mario Bros
Person.type() // I'm a Person

let luigi = new Developer('Luigi', 'Bros', 'ES6') // inherits every props and methods, even those static
luigi.introduce() // Hi, my name is Luigi Bros and I know ES6
Developer.type() // I'm a Person

Moduli

Javascript ha sempre necessitato di un sistema a moduli, cosa già nota in diversi linguaggi.

Con ES6 viene introdotto il nuovo sistema per esportare ed importare moduli.

// file js/myModule.js
export function sum(x, y) {return x + y}
export const ADDENDUM = 10

// file yourModule.js
import * as myModule from "js/myModule"
import {sum, ADDENDUM} from "js/myModule"

console.log(myModule.sum(10, 20)) // 30
console.log(sum(ADDENDUM, ADDENDUM)) // 20

ES6 Support

Affinché il nuovo standard sia supportato globalmente da tutti i browser e le piattaforme, passerà ancora del tempo. Infatti, i vari progetti che interpretano Javascript hanno implementato solo una parte di ES6 e le funzioni più allettanti sono ancora da realizzare.

La seguente tabella di compatibilità, può essere d'aiuto nel capire se la vostra futura applicazione può essere scritta interamente in ES6: http://kangax.github.io/compat-table/es6/

Se non potete aspettare di programmare nativamente in ES6, nessun problema: i vari transpiler e alcuni linguaggi che compilano in Javascript, hanno forniscono già un ampio supporto.

BabelJS (https://babeljs.io) è il transpiler più avanzato, dotato di REPL (https://babeljs.io/docs/usage/cli/) e di compilatore da ES6 a ES5.

Anche Traceur (https://github.com/google/traceur-compiler/) di casa Google fa essenzialmente lo stesso mestiere, essendo più indietro di BabelJS.

Linguaggi come CoffeeScript (http://coffeescript.org/), TypeScript (http://www.typescriptlang.org/) e Flow (https://github.com/facebook/flow), permettono invece la compilazione nella versione corrente di Javascript e in ES6.

Avanti tutta!

Il 2015 è l'anno di ES6 e sempre più piattaforme, sistemi e browser supporteranno tale versione.

E' necessario quindi poter essere al passo coi tempi per realizzare applicazioni performanti e strutturate grazie alle nuove accattivanti feature di ES6.

Per chi è ancora nuovo del linguaggio, i seguenti link posso essere utili per cominciare:

• http://es6-features.org/
• https://github.com/lukehoban/es6features