Le arrow functions in JavaScript

LT
Luca Terribili
Autore

JavaScript offre diversi strumenti per scrivere codice conciso e organizzare le operazioni in modo riutilizzabile. Tra le funzionalità introdotte con ECMAScript 2015 (ES6), le arrow functions, o funzioni freccia, occupano un posto importante. La loro sintassi compatta è particolarmente utile quando si definiscono callback, si trasformano collezioni con map() e filter() oppure si elaborano dati attraverso catene di operazioni.

Le arrow functions, però, non sono semplicemente una versione abbreviata delle funzioni tradizionali. Presentano differenze precise nel comportamento di this, non dispongono di un proprio oggetto arguments e non possono essere utilizzate come costruttori con new. Queste caratteristiche influenzano il modo in cui è opportuno impiegarle nei diversi contesti di un'applicazione.

Comprendere tali differenze permette di scegliere la forma di funzione più adatta senza affidarsi soltanto alla brevità della sintassi. In particolare, è fondamentale distinguere il contesto lessicale delle arrow functions dal comportamento delle funzioni tradizionali, il cui valore di this dipende normalmente dalla modalità di invocazione.

In questa guida analizzeremo la sintassi delle funzioni freccia, il loro utilizzo nelle operazioni sulle collezioni, il comportamento di this, le differenze rispetto alle funzioni tradizionali e i casi in cui è preferibile evitare le arrow functions.

Sintassi delle arrow functions

La caratteristica più evidente delle arrow functions è la sintassi compatta. Una funzione tradizionale che riceve un numero e ne restituisce il doppio può essere scritta così:

function double(x) {
    return x * 2;
}

La stessa operazione può essere espressa con una arrow function:

const double = x => x * 2;

Quando il corpo contiene una singola espressione e non utilizza parentesi graffe, il risultato dell'espressione viene restituito implicitamente. Non è quindi necessario scrivere return.

Se la funzione riceve più parametri, questi devono essere racchiusi tra parentesi:

const sum = (x, y) => x + y;

Le parentesi sono necessarie anche quando non ci sono parametri:

const getMessage = () => "Ciao!";

Quando invece il corpo contiene più istruzioni, si utilizzano le parentesi graffe e, se occorre restituire un risultato, si specifica esplicitamente return:

const complexOperation = (x, y) => {
    const result = x * y;
    return result + 10;
};

Una distinzione importante riguarda la restituzione implicita degli oggetti. Per restituire un object literal come espressione, occorre racchiuderlo tra parentesi tonde:

const createUser = (name, age) => ({
    name: name,
    age: age
});

Senza le parentesi tonde, le parentesi graffe verrebbero interpretate come l'inizio del corpo della funzione, non come un oggetto da restituire.

Le arrow functions sono espressioni di funzione e vengono spesso assegnate a variabili dichiarate con const. Questo permette di evitare riassegnazioni accidentali della variabile che contiene la funzione, anche se non rende immutabili eventuali oggetti manipolati dal codice.

Utilizzare le arrow functions con map(), filter() e reduce()

Le funzioni freccia sono particolarmente utili quando una funzione viene passata come argomento a un'altra funzione. Questo schema è frequente nelle operazioni sulle collezioni, dove si vuole descrivere come trasformare, selezionare o aggregare gli elementi.

Consideriamo una lista di numeri e supponiamo di voler ottenere il doppio di ogni elemento:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);
console.log(doubled);

Il risultato è:

[2, 4, 6, 8, 10]

Il metodo map() applica la funzione a ogni elemento e restituisce un nuovo array con i risultati. L'array originale non viene modificato da questa operazione.

Se vogliamo selezionare soltanto i numeri pari, possiamo utilizzare filter():

const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers);

Il risultato è [2, 4]. La funzione passata a filter() restituisce un valore booleano che determina se ciascun elemento deve essere incluso nel nuovo array.

Per calcolare la somma dei numeri possiamo usare reduce():

const total = numbers.reduce((sum, number) => sum + number, 0);
console.log(total);

Il risultato è 15. In questo caso, sum rappresenta l'accumulatore, number è l'elemento corrente e 0 è il valore iniziale dell'accumulatore.

Questi esempi mostrano perché le arrow functions sono comuni nella programmazione JavaScript moderna: permettono di esprimere la logica di una trasformazione direttamente nel punto in cui viene utilizzata. Non sono tuttavia obbligatorie. Se la logica è complessa o viene riutilizzata in molti punti, definire una funzione con un nome esplicito può migliorare la leggibilità.

Il comportamento di this: la differenza fondamentale

La caratteristica più importante delle arrow functions è il modo in cui gestiscono this.

Nelle funzioni tradizionali, il valore di this dipende generalmente da come la funzione viene invocata. In una chiamata come obj.method(), per esempio, this all'interno di method fa riferimento a obj. Se la stessa funzione viene estratta dall'oggetto e invocata separatamente, il comportamento può cambiare.

Le arrow functions, invece, non definiscono un proprio this. Quando il codice accede a this all'interno di una funzione freccia, il valore viene risolto dal contesto lessicale circostante. La funzione non crea quindi un nuovo contesto di this in base a come viene chiamata.

Vediamo un esempio con setTimeout():

const obj = {
    name: "MyObject",
    method: function() {
        setTimeout(function() {
            console.log(this.name);
        }, 1000);
    },
    arrowMethod: function() {
        setTimeout(() => {
            console.log(this.name);
        }, 1000);
    }
};
obj.method();
obj.arrowMethod();

In un normale ambiente browser, la callback tradizionale passata a setTimeout() viene invocata senza un ricevente esplicito. In questo caso, this nella callback è normalmente l'oggetto globale window, quindi this.name non indica il nome di obj e potrebbe risultare undefined.

La callback freccia, invece, utilizza il this della funzione arrowMethod, che è stata invocata come metodo di obj. Di conseguenza, stampa MyObject.

Il comportamento preciso delle funzioni tradizionali può variare in base all'ambiente e alle modalità di invocazione. Per esempio, in modalità strict mode una funzione tradizionale chiamata senza un ricevente esplicito ha this uguale a undefined, anziché all'oggetto globale. Il principio delle arrow functions rimane invece lo stesso: il loro this non viene determinato dalla chiamata della callback.

Le arrow functions non sono metodi equivalenti alle funzioni tradizionali

Una funzione freccia può essere assegnata a una proprietà di un oggetto, ma questo non la rende automaticamente equivalente a un metodo tradizionale.

Consideriamo il seguente esempio:

const user = {
    name: "Luca",
    getName: function() {
        return this.name;
    },
    getNameArrow: () => this.name
};
console.log(user.getName());
console.log(user.getNameArrow());

getName() è una funzione tradizionale invocata come metodo di user, quindi this.name restituisce "Luca".

getNameArrow(), invece, non acquisisce this da user. Il suo this dipende dal contesto esterno in cui è stata definita la funzione freccia. In un normale script JavaScript eseguito in modalità strict, questo contesto può non essere quello dell'oggetto globale e il risultato può essere undefined oppure un altro valore, a seconda dell'ambiente.

La regola pratica è semplice: quando un metodo deve usare this per accedere alle proprietà dell'oggetto che lo invoca, una funzione tradizionale è generalmente la scelta più adatta.

Le arrow functions sono invece utili all'interno di quel metodo, quando si vuole mantenere il contesto del metodo stesso all'interno di una callback.

arguments e parametri rest

Un'altra differenza riguarda l'oggetto arguments. Le funzioni tradizionali non dichiarate come metodi speciali possono accedere a questo oggetto, che contiene gli argomenti passati alla chiamata.

Le arrow functions non hanno un proprio arguments. Se al loro interno viene utilizzato questo identificatore, JavaScript cercherà una variabile omonima nel contesto esterno. Per raccogliere un numero variabile di argomenti, la soluzione moderna è utilizzare i parametri rest.

Con una funzione tradizionale:

function sumAll() {
    return Array.from(arguments)
        .reduce((total, number) => total + number, 0);
}
console.log(sumAll(1, 2, 3, 4));

Possiamo ottenere lo stesso risultato con una arrow function e il parametro rest:

const sumAll = (...numbers) =>
    numbers.reduce((total, number) => total + number, 0);
console.log(sumAll(1, 2, 3, 4));

Entrambi gli esempi restituiscono 10. La seconda versione rende esplicito il fatto che la funzione accetta un numero variabile di argomenti e permette di lavorare direttamente con un array.

Le arrow functions non possono essere usate come costruttori

Le funzioni tradizionali possono essere utilizzate come costruttori con l'operatore new, purché siano compatibili con tale utilizzo. Le arrow functions, invece, non possono essere invocate come costruttori.

Per esempio:

function User(name) {
    this.name = name;
}
const user = new User("Luca");
console.log(user.name);

Questa funzione può essere utilizzata con new, che crea un nuovo oggetto e associa a this l'istanza in costruzione.

Una arrow function non supporta questo comportamento:

const UserArrow = name => {
    this.name = name;
};
const user = new UserArrow("Luca");

Il secondo esempio genera un TypeError, perché una arrow function non è costruttibile. Se occorre creare istanze con un costruttore, è preferibile utilizzare una funzione tradizionale oppure una classe JavaScript.

Quando scegliere una arrow function

Le arrow functions sono particolarmente adatte alle callback brevi, alle trasformazioni di array e alle funzioni che devono mantenere il this del contesto esterno. Sono anche utili quando una funzione viene passata a un'altra funzione e non ha bisogno di un proprio contesto di invocazione.

Le funzioni tradizionali rimangono preferibili quando serve un this determinato dalla chiamata, quando si deve utilizzare arguments senza parametri rest oppure quando la funzione deve poter essere invocata con new.

La sintassi compatta non dovrebbe comunque essere l'unico criterio di scelta. Una funzione freccia lunga e piena di condizioni può risultare meno leggibile di una funzione nominata, mentre una funzione tradizionale usata come semplice callback può introdurre dettagli non necessari.

È inoltre importante ricordare che le arrow functions non dispongono di un proprio super o new.target: questi riferimenti, quando disponibili, vengono risolti attraverso il contesto lessicale circostante. Non si tratta di limitazioni casuali, ma di conseguenze del modello con cui le funzioni freccia sono state progettate.

Conclusione

Le arrow functions sono una caratteristica fondamentale di JavaScript moderno, ma il loro valore va oltre la riduzione della sintassi. La differenza decisiva rispetto alle funzioni tradizionali è il comportamento lessicale di this, accompagnato dall'assenza di un proprio arguments e dall'impossibilità di utilizzarle come costruttori.

Nelle operazioni su array, nelle callback asincrone e nelle trasformazioni dei dati, le funzioni freccia permettono di esprimere la logica in modo conciso. Nei metodi che dipendono dal ricevente, nei costruttori e nei casi in cui serve un contesto di invocazione specifico, le funzioni tradizionali rimangono spesso più appropriate.

La scelta migliore dipende quindi dal comportamento richiesto, non dalla quantità di caratteri risparmiati. Comprendere queste differenze permette di utilizzare le arrow functions con consapevolezza, evitare errori legati a this e scrivere codice JavaScript più chiaro, prevedibile e manutenibile.