Arrow function JavaScript

Introduzione alle arrow function JavaScript

Le arrow function, introdotte in ES6 (ECMAScript 2015), sono oggi una caratteristica fondamentale di JavaScript, in quanto offrono un modo più conciso per scrivere le espressioni di funzione. Sono particolarmente apprezzate perché semplificano il codice e risolvono i problemi più comuni legati alla parola chiave this.

Questa pagina va oltre la sintassi (trattata in Arrow function, le basi) e approfondisce il perché le arrow function si comportano nel modo in cui lo fanno. In sintesi, una arrow function non ha binding propri. Non ottiene un proprio this, un proprio arguments, un proprio super, né un metodo [[Construct]]. Ogni volta che si fa riferimento a uno di questi elementi all'interno di una arrow, JavaScript lo cerca nello scope circostante (lessicale), esattamente come farebbe per qualsiasi variabile ordinaria. Quasi tutte le peculiarità e i vantaggi delle arrow function derivano da questa sola regola.

Definire le Arrow Function

Le arrow function consentono una sintassi più breve rispetto alle tradizionali espressioni di funzione. Ecco un confronto di base per illustrarlo:

La versione con arrow function non solo è più breve, ma elimina anche la necessità della parola chiave function e delle parentesi graffe quando il corpo contiene una singola espressione.

Varianti di Sintassi

Le arrow function possono essere scritte in varie forme a seconda del numero di parametri e della complessità del corpo della funzione:

• Nessun parametro: si usano le parentesi vuote:

• Parametro singolo: le parentesi sono opzionali:

• Parametri multipli: le parentesi sono obbligatorie:

• Più righe: si usano le parentesi graffe e un return esplicito (se si restituisce un valore):

Le Arrow Function Non Hanno un Proprio this

La proprietà più importante delle arrow function è che non ottengono un proprio this. Una funzione ordinaria determina il proprio this al momento della chiamata, in base a come viene invocata (trattato in Metodi degli object, "this"). Una arrow function ignora tutto ciò e legge this dallo scope in cui è stata definita — questo meccanismo si chiama this lessicale.

È esattamente ciò che si desidera quando una arrow viene usata come callback. Un metodo che perde il proprio this all'interno di un callback ordinario lo mantiene invece all'interno di una arrow:

Se si sostituisce la arrow con una function(member) { ... } ordinaria, il this all'interno di forEach diventa undefined, causando l'errore Cannot read properties of undefined. Prima delle arrow function, gli sviluppatori aggiravano il problema con const self = this; oppure .bind(this) — vedi Function binding. Le arrow function eliminano la necessità di questi accorgimenti.

La stessa regola lessicale risolve il classico problema con i timer, in cui un callback viene eseguito scollegato dal proprio object:

Poiché this è fissato lessicalmente, non è possibile modificarlo. Chiamare .call(), .apply() o .bind() su una arrow function non ha alcun effetto su this — il binding viene ignorato:

Le Arrow Function Non Hanno arguments

Le arrow function non dispongono nemmeno di un proprio object arguments. Fare riferimento ad arguments all'interno di una arrow significa accedere a quello della funzione che la racchiude — il che è molto utile per wrapper e decorator:

Se si ha effettivamente bisogno degli argomenti della arrow function stessa, si usano i parametri rest (...args), che funzionano ovunque:

Le Arrow Function Non Sono Costruibili

Poiché una arrow function non ha il metodo interno [[Construct]] né la proprietà prototype, non è possibile usarla con l'operatore new:

Per lo stesso motivo, le arrow function non possono fare riferimento a super per accedere alla classe genitore, quindi non vengono mai usate come costruttori di classe o metodi di classe che dipendono da super.

Quando Non Usare le Arrow Function

Il this lessicale è ottimo nei callback, ma è sbagliato in alcuni contesti comuni. Si ricorre a una funzione ordinaria quando la funzione ha bisogno di un this dinamico proprio.

Metodi degli Object

Quando una funzione è il metodo di un object, di solito si vuole che this punti a quell'object. Una arrow prende invece this dallo scope esterno (spesso lo scope del modulo o globale), quindi non vedrà le proprietà proprie dell'object:

Si usi la sintassi abbreviata per i metodi (o un'espressione function) per i metodi degli object. Vedi Metodi degli object, "this" per il quadro completo.

Metodi del Prototype e Costruttori

Poiché le arrow non sono costruibili e non hanno un proprio this, non possono definire metodi del prototype né fungere da funzioni costruttore. I metodi aggiunti a un prototype devono essere funzioni ordinarie affinché ogni istanza risolva this su se stessa.

Gestori di Eventi DOM (nel browser)

Quando si collega un handler con addEventListener, il browser lo invoca con this impostato all'elemento che ha ricevuto l'evento. Una arrow ignora questo e mantiene il this esterno, quindi si usi una funzione ordinaria se è necessario che this sia l'elemento (si può comunque usare event.currentTarget in entrambi i casi).

Tecniche Avanzate

Restituire Object Literal

Per restituire un object literal da una arrow function, è necessario racchiudere l'object tra parentesi:

IIFE con Arrow Function

Le arrow function possono essere usate per le Immediately Invoked Function Expression (IIFE):

Riepilogo

Le arrow function si comprendono meglio partendo da ciò di cui sono prive. Non hanno:

• Nessun this proprio — viene preso dallo scope circostante (this lessicale), e .call/.apply/.bind non possono modificarlo. Ideale per i callback, sbagliato per i metodi degli object.
• Nessun arguments proprio — si usino i parametri rest (...args) se necessario.
• Nessun super — quindi non possono essere metodi di classe che chiamano il genitore.
• Nessun [[Construct]] e nessun prototype — quindi non possono essere usate con new né come metodi del prototype.

Si usino le arrow per callback brevi e per qualsiasi funzione che debba mantenere il this esterno. Si usino le funzioni ordinarie per i metodi degli object, i metodi del prototype, i costruttori e i gestori DOM che necessitano di un this dinamico.

Capitoli Correlati

• Arrow function, le basi
• Metodi degli object, "this"
• Function binding
• Costruttore, operatore "new"
• Parametri rest e spread syntax

Esercitazione