Scopri le Arrow Function per scrivere JavaScript moderno

Risparmiare tempo e utilizzare le ultime novità di un linguaggio sono obiettivi di qualsiasi sviluppatore moderno, ecco perché questo articolo fa per te.

Come ogni Skillato sono sicuro che anche tu desideri migliorare le tue conoscenze e applicarle nel lavoro il prima possibile.

Oggi voglio parlarti di una nuova sintassi introdotta in ES6 che ti permetterà di rendere il tuo codice molto più semplice da comprendere e veloce da scrivere!

Come ho scritto in un precedente articolo, negli ultimi anni l’evoluzione di JavaScript è stata molto importante e ci sono tanti aspetti che devi assolutamente conoscere per lavorare meglio.

Perché abbiamo bisogno delle Arrow Function?

Entriamo subito nel vivo della questione dicendo una cruda verità: non è essenziale usare le Arrow Function per scrivere codice JavaScript.

Non è essenziale perché, come spesso accade con i linguaggi di programmazione, sarai in grado di ottenere lo stesso risultato anche senza utilizzare questa nuova sintassi.

Ci sono però alcuni ma che devi tenere in considerazione se scegli di ignorare le Arrow Function.

Puoi scegliere di non usare questa nuova sintassi:

MA così facendo non mantieni aggiornate le tue conoscenze,
MA avrai dei problemi a leggere il codice degli sviluppatori che le utilizzano,
MA sarai obbligato a scrivere più codice per il resto della tua carriera.

Questi sono soltanto alcuni dei motivi che mi sono venuti in mente, sentiti libero di aggiungere i tuoi nei commenti.

Adesso è giunto il momento di entrare nel vivo dell’articolo dove cercheremo di capire perché le Arrow Function sono utili nel nostro lavoro.

Il concetto principale delle Arrow Function

Le Arrow Function sono in grado di semplificare e velocizzare il nostro lavoro e sono particolarmente indicate per creare le callback function, un tipo di funzione che in JavaScript viene largamente usato per generare una risposta a un determinato evento.

Facciamo un piccolo esempio per capire di cosa sto parlando.

Ti è mai capitato di scrivere una cosa del genere?

const box = document.querySelector( '.box' );
box.addEventListener( 'click', function(){
	// codice
});

Ebbene la funzione (anonima) per l’evento click è una callback function che, come specificato nel codice, viene eseguita soltanto quando qualcuno clicca sull’elemento .box.

Questo ci permette di lanciare qualsiasi tipo di funzione sul DOM che compone la pagina, per esempio potremmo prendere il testo dell’elemento e mostrarlo in una alert box.

box.addEventListener( 'click', function(){
	alert(box.innerText);
});

Al momento questo è solo classico JavaScript ma vediamo come si trasforma con le Arrow Function:

box.addEventListener( 'click', 
	() => alert( box.innerText)
);

A prima vista questa modifica sembra che ci abbia soltanto salvato dal dover scrivere function e le sue parentesi graffe ma scrivere questo tipo di funzioni ci permette di fare molto di più.

Alcune curiosità per farti lavorare meglio

Una delle caratteristiche più interessanti introdotte con le Arrow Function è il return implicito, ovvero non sei più obbligato a scrivere la parola chiave return per restituire un valore.

Questo non è molto chiaro nell’esempio precedente perché quello che ho fatto è stato lanciare la funzione alert(). Facciamo un esempio più semplice che mostri chiaramente cosa si intende per return implicito.

Creiamo la funzione somma() che prende due parametri e li somma assieme.

function somma( a, b ){
    return a + b;
}

La funzione che ho appena scritto è fin troppo semplice e raramente ti troverai a utilizzarla in un tuo programma, a meno che tu non stia creando una calcolatrice ?, ma presenta il processo logico di una funzione in modo chiaro:

definisco una funzione che utilizzerò nel mio programma,
la funzione accetta dei parametri,
la funzione svolge delle operazioni con i parametri passati,
il risultato di queste operazioni viene restituito per essere utilizzato.

Questo è un procedimento molto comune nel mondo della programmazione ma al posto di mostrarti una funzione complessa ho preferito fare qualcosa di semplice in modo che possa spendere più tempo nella spiegazione dei concetti relativi alle Arrow Function.

Vediamo come trasformare la precedente funzione:

( a , b ) => a + b;

Ecco che si inizia a notare quanto codice ci fanno risparmiare le Arrow Function, praticamente a parte le parentesi tonde tutto quello che è stato scritto nel blocco di codice precedente sono stati i parametri che utilizziamo e che la nostra funzione restituisce dopo aver svolto l’operazione.

Questo però apre le porte ad un’altra curiosità relativa alle Arrow Function:

Le Arrow Function sono funzioni anonime che si usano facilmente come callback.

Però questa nuova informazione di porta di fronte a un quesito:

Come posso dare un nome alle Arrow Function per richiamarle nel mio codice?

La risposta a questa domanda è molto più semplice di quello che ti potresti aspettare, basta inserirle in una variabile.

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

Adesso che abbiamo inserito la nostra nuova Arrow Function in una variabile possiamo richiamarla come una qualsiasi altra funzione.

somma( 3, 2 ); // Restituisce 5.

Il risultato della funzione somma() potrà essere passato ad altre funzioni o inserito in una nuova variabile proprio perché stiamo usando il return implicito.

Ma le curiosità sulle Arrow Function non terminano qua, anzi ci sono altri due aspetti che dobbiamo conoscere assolutamente per padroneggiare al meglio questa nuova sintassi.

Nell’esempio precedente ti ho mostrato una funzione che accetta due parametri ma ovviamente le funzioni create con JavaScript ne accettano un numero arbitrario.

Come utilizzare i parametri nelle Arrow Function

La nuova sintassi delle Arrow Function è completamente dedicata a velocizzare la scrittura del nostro codice ma come si comportano se dobbiamo passare un singolo parametro?

Diciamo per esempio che stiamo creando una funzione saluto() con la quale creiamo un messaggio di benvenuto. Senza entrare nel dettaglio e usare prompt() scriviamo questa semplice funzione.

let saluto = nome => `Ciao, ${nome}`;

Come fatto in precedenza, anche in questo caso abbiamo inserito la Arrow Function all’interno di una variabile saluto per darci la possibilità di richiamarla successivamente.

La cosa più interessante da notare è che nel caso venga utilizzato un singolo parametro le Arrow Function non hanno bisogno di parentesi tonde.

Tutto quello di cui avrai bisogno è far seguire il parametro che stai utilizzando da una => (definita “fat arrow”) e il gioco è fatto.

Sintassi ES6 in atto!

Nei blocchi di codice precedenti abbiamo utilizzato un po’ di codice proveniente dalla sintassi ES6 di cui le stesse Arrow Function fanno parte. Se sei interessato ad approfondire questi argomenti vieni a conoscere il nuovo corso che stiamo preparando!

A questo punto però ti potresti anche chiedere:

Come mi comporto se la mia funzione non ha parametri?

Dopo il precedente esempio potresti pensare che scrivere qualcosa di questo tipo sarebbe corretto:

let noParametri = => "Funzione senza parametri";

Sbaglieresti perché in questo contesto l’interprete JavaScript lancerebbe un errore di questo tipo:

Errore di sintassi quando si omettono le parentesi tonde per dichiarare una arrow function senza parametri.

Questo succede perché JavaScript non è in grado di interpretare una sintassi di questo tipo. Quello che serve per risolvere questo problema è aggiungere due parentesi tonde:

let noParametri = () => "Funzione senza parametri";

Ci basterà fare questa piccola modifica per dire che stiamo creando una Arrow Function senza parametri e tutto tornerà a funzionare correttamente.

Aggiungendo le parentesi tonde una arrow function senza parametri funziona correttamente.

La sintassi ES6 ci offre altre soluzioni per passare un numero arbitrario di parametri all’interno di una funzione ma questo esce dagli scopi di questo articolo.

Focalizziamoci sul prossimo aspetto.

Attento a `this` quando usi le Arrow Function

Se ti è capitato di scrivere diversi programmi in JavaScript al primo esempio che ti ho fatto in questo articolo dovresti aver storto il naso.

Non hai notato niente?

Osserva nuovamente il codice:

const box = document.querySelector( '.box' );
box.addEventListener( 'click', function(){
	alert(box.innerText);
});

La linea di codice che sto incriminando è la 3, quella in cui vado a lanciare un alert() utilizzando il testo contenuto all’interno dell’elemento cliccato, quello dove resto in ascolto per l’evento click.

Sto puntando il dito contro questa specifica riga di codice perché in genere quando si usano le funzioni di callback si indica l’elemento sul quale è avvenuto l’evento (perché potrebbero essere diversi).

Per specificare l’elemento si usa la parola chiave this.

Infatti se aggiungiamo al codice precedente un console.log(this) avremo:

In una normale funzione this rappresenta l'elemento che ha scatenato l'evento.

Però in questo articolo parliamo di Arrow Function e se trasformiamo la precedente funzione e consultiamo l’elemento this ci troveremo di fronte a un risultato inaspettato:

box.addEventListener( 'click', () => {
  // Controllo il valore di this
  console.log(this);
});

Il console.log(this) in questo caso ci mostrerebbe un oggetto del tutto diverso dal precedente.

Il this collegato da una Arrow Function è l'oggetto window.

Quello che succede quando si usano le Arrow Function è che il bind fatto da JavaScript non collega l’elemento che ha scatenato l’evento ma all’oggetto Window, ovvero lo scope della funzione.

Questo succede perché a differenza delle normali funzioni che creiamo con JavaScript, dove lo scope viene collegato (bind) a quello generale, le Arrow Function ereditano lo scope dallo scope genitore.

Non ritengo sia il caso di approfondire questo aspetto in un articolo introduttivo come questo ma lasciami dire che questo approccio risulta molto utile quando sviluppiamo con un paradigma di programmazione orientato agli oggetti.

Pronto a migliorare le tue conoscenze JavaScript?

Come visto anche dal precedente esempio dove una nuova sintassi di ES6 (e successive) ha modificato un comportamento classico di JavaScript, è importante conoscere tutti i vantaggi e svantaggi di questo linguaggio.

Introdurre le Arrow Function non significa che dovrai usare esclusivamente questa nuova sintassi, significa soltanto che hai una struttura in più che puoi sfruttere.

Casi come quello precedente, dove è importante poter accedere all’elemento che ha scatenato l’evento con this, sono molto comuni e la vecchia sintassi va più che bene, devi soltanto imparare quando sfruttare le Arrow Function.

Se sei interessato a questo argomento ti consiglio di iscriverti alla nostra newsletter perché, oltre al corso introduttivo che abbiamo già pubblicato, usciranno molti altri articoli e corsi dedicato a questo linguaggio e alle librerie e framework che ci fanno lavorare meglio!

Quindi se vuoi migliorare le tue conoscenze e applicarle al tuo lavoro il miglior regalo che puoi farti è quello di iscriverti alla newsletter, tanto è gratis ?