Funzioni Freccia in Javascript

Le funzioni freccia – chiamate anche funzioni “fat arrow”, sono un modo relativamente nuovo di scrivere funzioni concise in JavaScript. Sono state introdotte dalle specifiche ECMAScript 6 e da allora sono diventate la caratteristica ES6 più popolare. Le funzioni freccia ci permettono di usare l’operatore fat arrow => per definire rapidamente funzioni JavaScript, con o senza parametri. Siamo in grado di omettere le parentesi graffe e le parole chiave function e return quando si crea una nuova funzione JavaScript per scrivere una sintassi di funzione più breve. Non sono solo un risparmio di tempo, ma producono anche funzioni pulite e più leggibili.

In questo articolo, diamo un’occhiata ad alcuni scenari del mondo reale per creare funzioni freccia – usando ES6 contro la vecchia notazione ECMAScript 5 in modo da poter vedere come le due sintassi si confrontano tra loro.

La sintassi della funzione freccia più semplice è quando la funzione non ha alcun parametro. Nell’esempio qui sotto, la sintassi ECMAScript 5 dichiara un’espressione di funzione e la assegna alla variabile birthday. Emette una semplice stringa di testo alla console, dicendo “Buon compleanno!”:

Nella sintassi della funzione freccia, le parentesi graffe e le parole chiave function e return spariscono. Ora, l’intera funzione prende solo una singola linea. Le parentesi vuote indicano che la funzione non ha parametri e la freccia grassa lega il corpo della funzione ai parametri (attualmente inesistenti):

Un solo parametro

Estendiamo l’esempio precedente con un parametro, in particolare nome. La vecchia sintassi ES5 prende un parametro e aggiunge il suo valore alla stringa da restituire:

La sintassi della funzione freccia fa essenzialmente la stessa cosa. Dobbiamo racchiudere il nome del parametro tra le parentesi prima della freccia grassa e omettere la parola chiave return nel blocco della funzione:

Due parametri

Possiamo usare funzioni freccia con tutti i parametri che vogliamo. Per esempio, ecco lo stesso esempio con due parametri, età e nome. Ora, la funzione birthday() richiede due input per restituire la stringa. Per prima cosa, usiamo ECMAScript 5:

Ed ecco lo stesso codice con la nuova notazione ES6:

Letterali oggetto

Possiamo anche usare la sintassi delle funzioni freccia per dichiarare funzioni setter che permettono agli utenti di impostare il valore dei letterali oggetto. La funzione setBirthday() qui sotto permette agli utenti di impostare il nome e l’età della persona che compie gli anni:

Facendo uso della notazione di funzione freccia, basta una riga per definire la stessa funzione setter:

Manipolazione degli array

Possiamo usare le funzioni freccia anche per manipolare gli array JavaScript. Per esempio, diamo un’occhiata all’array di persone che include tre letterali di oggetto, ognuno dei quali ha una proprietà nome ed età:

Il metodo integrato map() di JavaScript ci permette di chiamare la stessa funzione su ogni elemento dell’array. Usando la notazione tradizionale ES5, possiamo restituire la proprietà nome di ogni persona nel modo seguente:

Con la notazione della funzione freccia, possiamo eseguire lo stesso compito in una riga:

Quando non usare le funzioni freccia

Anche se le funzioni freccia hanno molti casi di utilizzo, hanno anche alcune limitazioni. Ci sono alcuni scenari in cui non possiamo o non dovremmo usare la sintassi delle funzioni freccia.

Più importante, non possiamo creare costruttori con le funzioni freccia. Se usiamo la parola chiave new insieme alla sintassi fat arrow, la console darà un errore. Questo accade perché JavaScript tratta le funzioni freccia allo stesso modo dei metodi oggetto. Di conseguenza, non possono avere i propri metodi, che sarebbe una caratteristica essenziale degli oggetti JavaScript. Inoltre, non possiamo usare la sintassi ES6 per dichiarare letterali di oggetti e funzioni di callback che contengono metodi che fanno uso della parola chiave this, poiché le funzioni freccia la trattano in modo diverso.

Conclusione

Le funzioni freccia forniscono agli sviluppatori un’utile abbreviazione per scrivere espressioni di funzioni in JavaScript. La sintassi della freccia grassa ha molti casi d’uso, quindi è diventata rapidamente la caratteristica ES6 preferita dalla comunità JavaScript. Se usata coerentemente, la nuova notazione compatta può far risparmiare molto tempo e larghezza di banda, e migliorare la leggibilità del codice.

Grazie per aver letto.