Le arrow function in Javascript. Esempi e limiti di utilizzo.
Le arrow function, o funzioni freccia, sono state introdotte in javascript a partire dalla versione ES6, e sono un nuovo modo di creare funzioni rispetto al modo a cui siamo abituati.
Le comuni funzioni sono indicate, ad esempio, in questo modo
var somma = function somma(x, y) {
return x + y;
};Questa funzione, riceve in input le variabili x e y, e rende la loro somma
Con le funzioni a freccia la stessa funzioni si trasforma così
var somma = (x, y) => x + y;Vediamo, in questo esempio, le differenze rispetto alle funzioni classiche:
- la parola chiave function non viene usata
- le parentesi graffe non vengono utilizzate (questa regola non vale sempre, lo vedremo tra poco)
- l'istruzione return non viene utilizzata (questa regola non vale sempre, lo vedremo tra poco)
La funzione freccia viene invocata esattmente come la funzione canonica, ad esempio
var totale = somma(5, 1);Vediamo di seguito le regole generali di una arrow function
La parola chiave function
Come visto nell'esempio precedente, nelle funzioni a freccia la parola chiave function, seguita dal nome della funzione, viene sostituita da una freccia =>
Le arrow functions sono quindi funzioni anonime, cioè non possiedono un nome esplicito
Parametri delle arrow function
La regola generale di una arrow function prevede le parentesi tonde intorno alla lista dei parametri, nel nostro esempio "(x,y)";
(x, y) => ... Se il parametro da passare fosse unico, la funzione a freccia si semplifica così, senza le paraentesi tonde:
x => ... E se non venissero passati parametri avremmo:
() => ... Il corpo delle arrow functions
Il corpo della funzione, cioè la parte che segue la freccia, nelle funzioni classiche va delimitato da parentesi graffe e con l'istruzione return.
Nelle funzioni freccia, invece, non è sempre così. Nel nostro esempio iniziale infatti non sono indicate.
var somma = (x, y) => x + y;Ma non sarebbe un errore scrivere così
var somma = (x, y) => {return x + y;}oppure così
var somma = (x, y) => {x + y;}Se, infatti, il corpo presenta una singola istruzione, cioè una sola riga, le "graffe" e il "return" si possono omettere.
Ecco un altro esempio di funzione a freccia
const square = (x) => x * x;
console.log(square(7));Apriamo la console e vedremo il risultato 49
Tradotta in una funzione tradizionale sarebbe questa
function square(x){
return x * x;
}
console.log(square(7));Facciamo altri due esempi.
Ecco una funzione classica che rende true se il numero è "pari", altrimenti "false"
function Pari(a){return a%2 === 0 ? true : false;}In versione a freccia
const Pari = a => {return a%2 === 0 ? true : false;}o più sinteticamente
const Pari = a => a%2 === 0 ? true : false;Un'ultima funzione classica che rende il maggiore tra "a" e "b"
function Max(a,b){return a>=b ? a : b;}In versione a freccia
const Max = (a,b) => a>=b ? a : b;In questi esempi abbiamo visto come la funzione a freccia è più leggibile rispetto alla funzione classica.
Infine vediamo un esempio in cui il corpo presenta più istruzioni, per cui è obbligatorio usare parentesi graffe e return.
Così in forma tradizionale
function Ripeti(x,volte){
let risultato = x;
for (let i=0; i<volte-1; i++){
risultato +=s;
}
return risultato;
}Così con una arrow function:
cont Ripeti = (x, volte){
let risultato = x;
for (let i=0; i<volte-1; i++){
risultato +=s;
}
return risultato;
}Arrow function e metodo map
La sintassi compatta rende la arrow function molto utilizzata, ad esempio, nel metodo map di javascript (metodo che ci consente di iterare gli elementi di un array).
Nel prossimo esempio abbiamo un array di "numeri" che diamo in pasto al metodo map, che moltiplicherà tramite una funzione anonima ogni numero dell'array per 2.
Inziamo a vedere l'esempio utilizzando una funzione classica
const numeri=[1,2,3];
numeri.map(function(numero){ return 2 * numero; }) //[ 2, 4, 6 ]
Ecco invece lo stesso esempio con una funzione a freccia
const numeri=[1,2,3];
numeri.map(numero => 2 * numero) //[ 2, 4, 6 ]La arrow function avrà un solo parametro in ingressi ("numero") e quindi non necessita di parentesi tonde, ed una sola istruzione quindi non avrà ne graffe ne return. Risulta quindi molto più leggibile.
Arrow function e restituzione di oggetti in forma letterale
Occorre prestare attenzione quando una arrow function viene utilizzata per creare, quindi restituire, valori letterali di oggetti.
Una funzione classica potremmo scriverla così
var createObject = function createName(x,y) { return {'colore':x, 'taglia':y}; };L'equivalente utilizzando una funzione a freccia la scriviamo così
var createArrowObject = (x,y) => ({'colore':x, 'taglia':y});Restituendo l'oggetto, questo sarà compreso tra le parentesi graffe traendo in errore Javascript perchè scambierebbe queste parentesi per il corpo della funzione.
Ecco che in questi casi la funzione a freccia richiede obbligatoriamenente l'uso delle parentesi tonde per avvolgere il corpo della funzione.
Se abbiamo difficoltà di lettura, potremmo anche indicare il "return"
var createArrowObject = (x,y) => (return {'colore':x, 'taglia':y});Vediamo un ultimo esempio
const CreaObj = (chiave,valore) => ({[chiave] : valore});
obj = CreaObj('altezza',180);
console.log(obj.altezza); // 180Nota: la funzione freccia riceve due parametri "chiave" e "valore". Ricordiamoci che per costruire oggetti in forma letterale inserento variabili (il parametro in ingresso "chiave") è necessario farle computare utilizzando le parentesi quadre.
Le arrow function e la keyword this
Vediamo come si comporta la parola chiave this utilizzata all'interno della funzione classica e nelle funzioni a freccia.
In questo esempio aggiungiamo "console.log(this)" all'interno della funzione, così da poter vedere cosa appare nella console.
Nella funzione classica
<script>
function Ripeti(x,volte){
console.log(this);
let risultato = x;
for (let i=0; i<volte-1; i++){
risultato +=s;
}
return risultato;
}
</script>Nella funzione arrow
<script>
cont Ripeti = (x, volte){
console.log(this);
let risultato = x;
for (let i=0; i<volte-1; i++){
risultato +=s;
}
return risultato;
}
</script>Lanciando entrambe le funzioni, in entrambi i casi this corrisponde all'oggetto globale Window.
Ma in altri scenari, che adesso vediamo, assumerà significato differente e per questo motivo in alcune situazioni le funzioni freccia non vanno usate.
NON usare la funzioni freccia come metodi degli oggetti
Prendiamo questa variabile "obj" che è un oggetto con tre propietà: "x", "y", e "moltiplicazione" che è un metodo di questo oggetto
const obj = {
x: 5,
y: 6,
moltiplicazione: function(){return this.x * this.y;}
}Non possiamo trasformare la funzione utilizzata nel metodo in una funzione freccia, sarebbe un errore
const obj = {
x: 5,
y: 6,
moltiplicazione: () => this.x * this.y;
}Questo resituirebbe infatti un NaN (Not a Number). Nella funzione freccia this non fa riferimento all'elemento per il quale è utilizzato (l'oggetto "obj") ma viene cercato nell'ambiente globale (Window) in cui la funzione freccia è stata scritta.
Questo ci espone ad un rischio: se fossero dichiate delle variabili var x e y nell'ambiente globale, verrebbero presi quei valori come "this.x" e "this.y" !
var x=12;
var y=7;
const obj = {
x: 5,
y: 6,
moltiplicazione: () => this.x * this.y;
}Ecco il motivo per cui conviene non usare le funzioni freccia come metodi degli oggetti.
Nota: la problematica vista non sarebbe successa se invece delle "var" avremmo usato le variabili "let".
Un caso in cui, invece, possiamo usare le funzioni freccia è se ci troviamo all'interno una classe, dove il "this", come sappiamo, fa riferimento alla classe stessa
class obj = {
constructor(x,y){
this.x=x;
this.y=x;
}
moltiplicazione = () => this.x * this.y;
}
const obj(3,5);
console.log(obj.moltiplicazione());NON usare la funzione freccia per gli event handler
Un altro caso in cui è meglio non usare le funzioni freccia come callback di un event listener.
In questo esempio abbiamo creato una pagina html con un bottone. Il javascript rileva il click sul bottone e nella console apparirà il contenuto del bottone "Clicca qui"
<html>
....
<body>
<button id='btn'>Clicca qui</button>
<script>
document.getElementById("btn").addEventListener('click',function(){console.log(this.InnerHTML);})
</script>
</body>
</html>Convertiamo lo script con una funzione freccia
document.getElementById("btn").addEventListener('click',()=>{console.log(this.InnerHTML);})
Al click otterremo un "undefine" e questo per lo stesso problema dell'esempio precedente: "this" fa riferimento all'oggetto "Window".
Problematiche delle arrow function
Per concludere questo articolo, riepiloghiamo limiti e problematiche delle funzioni freccia
- Non va utilizzata all'interno dei metodi degli oggetti
- Non va utilizzata come callback di un event listener
- Essendo funzioni anonime, sono più difficili da analizzare in fase di debug poichè, in caso di errore, non potremo tenere traccia del nome della funzione che produce l'errore.
- In alcuni casi si potrebbe peggiorare la leggibilità della funzione
