Creazione Siti Web, Marketing e Pubblicità - Web Agency Alessio Doria

Javascript ES6: Sintassi e features

Un’introduzione a ES6, nello specifico riguardo alla sintassi e alle features, come le classi, promises, le costanti a il destructuring, con una comprazione passo passo con le “vecchie” versioni di Javascript!
ECMAScript 2015, conosciuto anche come ES6, ha introdotto numerosi cambiamenti a quello che è il linguaggio Javascript.
Ecco a voi un articolo riguardo i principali cambiamenti e alcuni confronti con le versioni precedenti (ES5), laddove sono applicabili.

 

Comparazione tra la dichiarazione delle variabili e costanti

 

Dichiarazione delle variabili

ES5:     var x = 0;

ES6:     let x = 0;

 

Dichiarazione delle costanti

ES5:     Non disponibile come “const”

ES6:     const IDENTIFICATORE = 0;       //Convenzionalmente il nome è MAIUSCOLO per le costanti

 

Funzione “Arrow”

ES5:     function funzione(a, b, c) {};
var funzione = function(a, b, c) {};

ES6:     let funzione = a => {};
let funzione = (a, b, c) => {};

 

Concatenazione delle string e/o interpolazione

ES5:     var stringa = ‘Ciao sono ‘ + nome;

ES6:     let stringa = ‘Ciao sono ${nome}’;

 

String su più linee/multi-linea

ES5:
var stringa = ‘Ciao sono ‘ +
‘Alessio Doria’ +
‘e sono su più linee’;

ES6:
var stringa = ‘Ciao sono
Alessio Doria
e sono su più linee’;

 

Ritorno implicito

ES5:     function funzione(a, b, c) { return a * b * c;}

ES6:     let funzione = (a, b, c) => a * b * c;     //Le parentesi graffe possono essere omesse!

 

Definizione dei method negli oggetti

ES5:

var oggetto = {
    a: function(c, d) {},
    b: function(e, f) {}
};

ES6:

let oggetto = {
    a(c, d) {},
    b(e, f) {}
};

oggetto.a(); //Richiama il metodo "a".

 

Abbreviazione key/propriety di un oggetto

ES5:

var obj = { 
    a: a, 
    b: b
}

ES6:

let obj = { 
    a, 
    b
}

 

Destructuring (oggetti)

var oggetto = { a:1, b:2, c:3};

ES5:

var a = oggetto.a;
         var b = oggetto.b;
         var c = oggetto.c;

ES6:

let {a, b, c} = oggetto;

Iterazione negli array (vettori) o looping

var arr = [‘a’, ‘b’, ‘c’];

ES5:

for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

ES6:

for (let i of arr) {
    console.log(i);
}


Parametri di default/default parameters

ES5:

var funzione = function(a, b) {
    b = (b === undefined) ? 2 : b;
    return a + b;
}

ES6:

let funzione = (a, b = 2) => {
    return a + b;
}

func(10);      //Ritorna 12 come valore
func(10, 5//Ritorna 15 come valore


Concatenazione delle string e/o interpolazione

ES5:

let arr1 = [1, 2, 3];
let arr2 = ['a', 'b', 'c'];
let arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, "a", "b", "c"]

ES6:

let arr1 = [1, 2, 3];
let func = (a, b, c) => a + b + c;
console.log(func(...arr1)); // 6


Classi/constructor della funzione

ES6 ha introdotto la sintassi “class” basandosi sulla funzione constructor – prototype.

ES5:

function Func(a, b) {
    this.a = a;
    this.b = b;
}

Func.prototype.ottieniSomma = function() {
    return this.a + this.b;
}

var x = new Func(3, 4);

ES6:

class Func {
    constructor(a, b) {
        this.a = a;
        this.b = b;
    }

    ottieniSomma() {
        return this.a + this.b;
    }
}

let x = new Func(3, 4);

x.ottieniSomma(); //Darà come output 7

Inheritance

La keyword “extends” crea una sub-class.

ES5:

function Inheritance(a, b, c) {
    Func.call(this, a, b);

    this.c = c;
}

Inheritance.prototype = Object.create(Func.prototype);
Inheritance.prototype.getProduct = function() {
    return this.a * this.b * this.c;
}

var y = new Inheritance(3, 4, 5);

ES6:

class Inheritance extends Func {
    constructor(a, b, c) {
        super(a, b);

        this.c = c;
    }

    getProduct() {
        return this.a * this.b * this.c;
    }
}

let y = new Inheritance(3, 4, 5);

y.getProduct(); //Darà come output 60

 

Moduli – import/export

ES6 permette di importare ed esportare codice tra due o più file(s).
All’interno del file “.html”

E nei 2 file “export.js” e “import.js”:

Export.js

let func = a => a + a;
let obj = {};
let x = 0;
export { func, obj, x };

Import.js

import { func, obj, x } from './export.js';
console.log(func(3), obj, x);


Promises/Callbacks

Callback con ES5:

function doSecond() {
    console.log('Do second.');
}

function doFirst(callback) {
    setTimeout(function() {
        console.log('Do first.');

        callback();
    }, 500);
}

doFirst(doSecond);


Callback con ES6:

let doSecond = () => {
    console.log('Do second.');
}

let doFirst = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('Do first.');

        resolve();
    }, 500);
});

doFirst.then(doSecond);



Per qualsiasi domanda/approfondimento scrivici pure nei commenti, risponderemo il prima possibile!
Se hai bisogno di contattarci puoi farlo dalla nostra Homepage tramite l’apposito modulo o cliccare direttamente qui!