Sintassi di ECMA Script 6

In questo articolo, vedremo un recap sulla sintassi di ECMA Script 6, le principali keyword, la gestione degli array e la creazione di classi.

Non vuole essere una guida globale, ma solo un breve recap per affrontare lo sviluppo di applicazioni con Vue.

Keyword let

Parola chiave per dichiarare una variabile con scope locale al blocco. La parola chiave var dichiara variabili con scope globale. Un esempio utile viene mostrato con i cicli for, in cui la variabile contatore viene dichiarata con let.

Keyword const

Parola chiave per dichiarare una variabile con valore costante. Quando viene fatto un nuovo assegnamento il parser lancia un errore.

Stringhe template

E’ un meccanismo di templating delle stringhe dove dei placeholder inseriti nella stringa vengono sostituiti con delle variabili.

Per fare questo si usano delle backtick, cioè queste virgolette: `  (ACUTE ACCENT Unicode: U+00B4)

console.log( ´ Hello ${variable} ´ );

All’interno delle parentesi graffe si possono inserire istruzioni JavaScript che in genere servono a effettuare semplici elaborazioni del dato prima della presentazione nella stringa.

Operatori spread

L’operatore spread trasforma gli elementi di un array in argomenti di una funzione o in elementi di un array literal.

let cats = ['Tabby', 'Siamese', 'Persian'];
let dogs = ['Golden Retriever', 'Pug', 'Schnauzer'];

let animals = ['Whale', 'Giraffe', ...cats, 'Snake', ...dogs, 'Coyote'];

In questo modo all’array animals vengono aggiunti gli elementi degli array cats e dogs.

Arrow Function / Funzioni Freccia

E’ una sintassi abbreviata per lavorare con le funzioni, da non confondere con un operatore.

// Sintassi ES5
var studentList = function (students) {
	console.log(students);
}

studentList(['Joe', 'Cindy', 'Jeanne']);

Allo script sopra si applica del sintactyc sugar per abbreviare il codice:

// Sintassi ES6
var studentList = students => console.log(students);
studentList(['Joe', 'Cindy', 'Jeanne'])

Arrow Function e scope “this”

Le funzioni freccia facilitano anche l’utilizzo della keyword this, vediamo un esempio di codice in ES5:

var person = {
	first: 'Doug',
	actions: ['bike', 'hike', 'ski', 'surf'],
	printActions: function () {
		this.actions.forEach(function (action) {
				var str = this.first + 'likes to ' + action;
				console.log(str);
			});
	}
}
person.printActions();

Il codice precedente genera un errore, this.first non è definito, perché this viene utilizzato fuori dal contesto.
In ES5 per ovviare a questo si usa un trucco, definendo una variabile e assegnandogli this:

var person = {
	first: 'Doug',

	actions: ['bike', 'hike', 'ski', 'surf'],
	printActions: function () {
			var self = this;

			self.actions.forEach(function (action) {
			var str = self.first + 'likes to ' + action;
			console.log(str);

		});
	}
}

person.printActions();

un secondo metodo è utilizzare il bind:

var person = {

	first: 'Doug',
	actions: ['bike', 'hike', 'ski', 'surf'],
	printActions: function () {

		this.actions.forEach(function (action) {
			var str = this.first + 'likes to1 + action;
			console.log(str);

		}.bind(this));
	}
}

person.printActions();

In ES6 il codice può così essere espresso:

const person = {
	first: 'Doug',
	actions: ['bike', 'hike', 'ski', 'surf'],

	printActions () {
		this.actions.forEach((action,param2,param3) => {
				let str = this.first + ' likes to ' + action;
				console.log(str);
			});
	}		
}

person.printActions();

dato la funzione all’interno del for each ha più righe manteniamo le parentesi graffe.
Con questa sintassi il this della funzione printActions ha lo stesso scope dell’oggetto person.

Sintassi delle classi in ES6

In ES6 abbiamo a disposizione una nuova sintassi per gestire la programmazione a oggetti in JavaScript:

class Vehicle {

	constructor(description, wheels) {
		this.description = description;
		this.wheels = wheels;
	},

	describeYourself () {
		console.log( ´ I am a ${this.description} with ${this.wheels} wheels ´ );
	}

}

var coolSkinVan = new Vehicle('cool skin van', 4);
coolSkinVan.describeYourself();