ECMAScript rappresenta la specifica di un linguaggio client-side come JavaScript. ECMAScript 6 (ES6) ha apportato significativi aggiornamenti al linguaggio.

Dichiarazione di variabile

Con l’avvento di ES6 per dichiarare una variabile si può utilizzare let al posto di var. La differenza tra le due definizioni risiede nello scope delle variabili. Se si usa let, lo scope della variabile sarà solo il corrente blocco di codice. Per esempio:

let miaVariabile=25;

if(miaVariabile>10){

    let altraVariabile=true;

    console.log(altraVariabile); // l’output sarà true

}

console.log(altraVariabile); // l’output sarà un errore

Dichiarazione di costante

Come le variabili dichiarate con let, le variabili dichiarate con const hanno scope definito in un blocco. Tuttavia c’è una differenza fondamentale: il valore assegnato ad una variabile const non può essere modificato. Per esempio:

const nome=‘Pippo’;

nome=‘Pluto’; // verrà generato un errore

Arrow functions
Questo tipo di funzione sono definite con una nuova sintassi che fa uso di una freccia (arrow =>). Per esempio supponiamo di avere la seguente funzione:

let increment= value => value+1;

increment(4); // questa chiamata alla funzione restituirà il valore 5

// la precedente funzione è equivalente a

let increment=function($value){

    return $value+1;

}

Ora, supponiamo di avere una funzione che riceve in ingresso due parametri:

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

somma(2,3); // questa chiamata alla funzione restituirà il valore 5

L’ultimo esempio riguarda una funzione che non riceve alcun parametro:

let saluto=()=>{

    console.log(‘Saluto 1’);

    console.log(‘Saluto 2’);

}

saluto(); // nella console verrà stampato Saluto 1 e Saluto 2

Nell’esempio si notano 2 cose:

  • quando non vengono passati parametri alla funzione bisogna inserire due parentesi tonde () prima della freccia (=>);
  • quando gli statement della funzione sono più di uno, il corpo della funzione deve essere racchiuso tra parentesi graffe.

I moduli
ES6 supporta l’esportazione e l’importazione di moduli in file differenti.
Creiamo due file .js nel modo seguente:

app.js
let nome=‘Pippo’;

export {nome};

main.js
import {nome} from ‘./app.js’;

console.log(‘Ciao ‘,nome);

Successivamente importiamo il file main.js in un file HTML.

Da un modulo si può esportare anche una funzione. Per esempio:

app.js
let nome=‘Pippo’;

function saluto(){

console.log(‘Hello World’);

}

export {nome,saluto};

main.js
import {nome,saluto} from ‘./app.js’;

console.log(‘Ciao ‘,nome);

saluto();

Le classi
Una classe è definita dalla keyword class. Alla classe possono essere assegnate delle proprietà attraverso il metodo constructor(). Osserviamo il seguente esempio:

<script>
class Auto{ 

 
constructor(marca)
{

this.marcaAuto=marca;

}

}

var miaAuto=new Auto(‘Fiat’);

console.log(miaAuto.marcaAuto); // l’output sarà Fiat

</script>

Il metodo constructor è un metodo speciale ed è chiamato automaticamente quando la classe è istanziata. Alla classe possono essere aggiunti altri metodi. Per esempio, nella classe inseriamo il metodo marcaAutoAttuale nel modo seguente:

<script>

class Auto{

    constructor(marca)

    {

        this.marcaAuto=marca;

    }

    marcaAutoAttuale()

    {

        return ‘La marca della mia auto è ‘+this.marcaAuto;

    }

}

var miaAuto=new Auto(‘Fiat’);

console.log(miaAuto.marcaAutoAttuale());

</script>

Inoltre, è possibile passare al metodo dei parametri:

<script>

class Auto{

    marcaAutoAttuale(x)

    {

        return x+‘ La marca della mia auto è ‘+this.marcaAuto;

    }

}

var miaAuto=new Auto(‘Fiat’);

console.log(miaAuto.marcaAutoAttuale(‘Ciao,’));

</script>

Corso JavaScript by LaraMind: accelera la tua voglia di crescere come developer!

Alessandro Gigliarano