Le Basi delle Arrow Function in JavaScript

Introduzione alle Arrow Function

Le arrow function, introdotte in ES6 (ECMAScript 2015), sono un modo conciso per scrivere espressioni di funzione in JavaScript. Sono particolarmente utili per funzioni brevi e sono usate ovunque nelle librerie e nelle applicazioni JavaScript moderne — soprattutto come callback passate ai metodi degli array, ai timer e ai gestori di eventi.

Una arrow function è più di una semplice sintassi ridotta. Si comporta anche in modo diverso da una funzione normale in un aspetto importante: non crea il proprio this. Questa pagina tratta la sintassi e il comportamento di this; per i casi limite avanzati (niente arguments, niente new, generatori), consulta Arrow function, rivisitate.

Sintassi di Base

La forma generale di una arrow function è:

let functionName = (param1, param2, ..., paramN) => expression;

Questo crea una funzione che accetta param1, param2, ..., paramN come parametri e restituisce il risultato di expression. Il token => si legge come "va a" o semplicemente "freccia".

L'equivalente tradizionale espressione di funzione ha questo aspetto — confrontare le due versioni affiancate mostra cosa la sintassi con la freccia omette:

La versione con la freccia elimina la parola chiave function, le parentesi graffe e il return esplicito. Il risultato è identico.

Arrow Function a Riga Singola (Return Implicito)

Quando il corpo è una singola espressione, puoi omettere le parentesi graffe e la parola chiave return. Il valore dell'espressione viene restituito automaticamente — questo si chiama return implicito:

Arrow Function Multi-riga (Return Esplicito)

Se il corpo richiede più di un'istruzione, racchiudilo tra parentesi graffe {}. Una volta usate le graffe, il return implicito scompare, quindi devi scrivere return esplicitamente se vuoi restituire un valore:

Dimenticare il return dentro le graffe è un errore comune tra i principianti: la funzione restituisce quindi undefined.

Regole sulle Parentesi

Le parentesi intorno ai parametri seguono regole semplici:

• Un parametro: le parentesi sono facoltative — x => x * 2.
• Zero parametri: le parentesi vuote sono obbligatorie — () => 42.
• Due o più parametri: le parentesi sono obbligatorie — (a, b) => a + b.

Restituire un Object Literal

Per restituire un object con la sintassi del return implicito, racchiudi l'object tra parentesi tonde. Senza di esse, JavaScript interpreta { come l'inizio del corpo della funzione, non come un object literal — quindi il corpo della funzione viene semplicemente eseguito e restituisce undefined:

Vantaggi delle Arrow Function

1. Concisione — Le arrow function hanno una sintassi più breve rispetto alle tradizionali espressioni di funzione, il che rende le callback più leggibili.
2. this lessicale — Le arrow function non hanno un proprio this. Ereditano this dallo scope circostante (genitore), eliminando un'intera classe di bug legati alla perdita di this nelle callback.
3. Return impliciti — Con la sintassi a riga singola il return è automatico, rendendo le trasformazioni brevi più pulite.

Come Funziona this nelle Arrow Function

Questa è la differenza più importante tra arrow function e funzioni normali. Una funzione normale ottiene il proprio this, determinato da come viene chiamata. Una arrow function non ha un this proprio — lo recupera dallo scope in cui è stata definita. Questo è noto come this lessicale.

Il problema classico si presenta all'interno di un metodo che pianifica una callback. Con una funzione normale, il this della callback viene perso; con una arrow function, this viene ereditato:

Poiché la arrow function cattura this da startArrow (dove this è l'object counter), legge correttamente this.value. La funzione normale dentro setTimeout viene chiamata senza un contesto object, quindi il suo this.value è undefined. Per un'analisi più approfondita di come viene determinato this nei metodi normali, consulta Metodi degli object, "this".

Limitazioni delle Arrow Function

Le arrow function non sono un sostituto universale di ogni funzione. Il loro this lessicale è esattamente ciò che le rende inadatte in certi contesti.

1. Non ideali come metodi di object — Poiché una arrow function eredita this dallo scope circostante anziché dall'object su cui viene chiamata, usarla come metodo di solito non produce il risultato atteso.
2. Non possono essere costruttori — Le arrow function non possono essere usate con new e generano un errore se ci provi; non sono costruttori.
3. Nessun object arguments proprio — All'interno di una arrow function, arguments fa riferimento a quello dello scope esterno, non agli argomenti passati alla arrow stessa. Usa i parametri rest (...args) al suo posto.

L'insidia del metodo in pratica — this non punta all'object:

Quando Usare l'Una o l'Altra

• Opta per una arrow function per callback brevi: metodi degli array, promise, timer e gestori di eventi in cui vuoi mantenere il this del contesto circostante.
• Opta per una funzione normale quando hai bisogno di un metodo che usa this per fare riferimento al proprio object, un costruttore, o dell'accesso all'object arguments.

Esempi Pratici

Metodi degli Array

Le arrow function eccellono con i metodi degli array come map, filter e reduce, dove ogni chiamata è una piccola trasformazione:

Listener di Eventi

Le arrow function sono comode per i listener di eventi, specialmente all'interno di una classe o di un object in cui vuoi che this continui a puntare all'istanza circostante (questo esempio usa il browser, quindi eseguilo in una pagina anziché nella console):

document.getElementById("myButton").addEventListener("click", () => {
  console.log("Button clicked!");
});

Callback e Promise

Mantengono il codice asincrono compatto quando usate come callback:

Conclusione

Le arrow function sono una funzionalità versatile e quotidiana del JavaScript moderno. Forniscono una sintassi concisa, supportano i return impliciti per i corpi a riga singola e — soprattutto — ereditano this dallo scope circostante, evitando comuni bug di contesto nelle callback. Sono ideali per i metodi degli array, le promise e i gestori di eventi, ma non per i metodi di object che si affidano al proprio this, per i costruttori, o per il codice che necessita dell'object arguments. Sapere quando usare ciascun tipo di funzione è la chiave per utilizzarle al meglio. Continua con Arrow function, rivisitate per i casi limite rimanenti.

Esercitati