Arrow Functions
Arrow Functions in JavaScript
Le arrow functions sono una forma abbreviata di dichiarare funzioni in JavaScript, introdotte con ES6.
Sono particolarmente utili per funzioni semplici e per mantenere il contesto di this
.
Sintassi di base
La sintassi di una arrow function è più breve rispetto alle funzioni tradizionali.
Esempio: funzione tradizionale vs arrow function

// Funzione tradizionale
function somma(a, b) {
return a + b;
}
// Arrow function
const sommaArrow = (a, b) => a + b;
console.log(somma(5, 3)); // Output: 8
console.log(sommaArrow(5, 3)); // Output: 8
Quando usare le graffe {}
Se la funzione contiene più istruzioni, è necessario usare le graffe {}
e la parola chiave return
.
Esempio: arrow function con più istruzioni

const calcolaArea = (larghezza, altezza) => {
let area = larghezza * altezza;
return area;
};
console.log(calcolaArea(4, 5)); // Output: 20
Arrow functions e "this"
Le arrow functions non creano un nuovo contesto di this
, ma ereditano quello esterno.
Questo le rende molto utili nelle funzioni di callback.
Esempio: differenza nel comportamento di this

function Persona(nome) {
this.nome = nome;
// Funzione tradizionale
setTimeout(function() {
console.log("Ciao, sono " + this.nome); // this è undefined
}, 1000);
// Arrow function
setTimeout(() => {
console.log("Ciao, sono " + this.nome); // this è l'oggetto Persona
}, 2000);
}
new Persona("Marco");
Tabella di confronto
Caratteristica | Funzione tradizionale | Arrow function |
---|---|---|
Sintassi | Più lunga, usa la parola chiave function |
Compatta, usa => |
this | Crea un proprio this |
Eredita il this esterno |
Uso consigliato | Funzioni complesse o metodi di oggetto | Callback, funzioni brevi e inline |
Considerazioni
Le arrow functions migliorano la leggibilità del codice e sono ideali per operazioni semplici.
Tuttavia, non sono adatte come metodi di oggetto quando serve un proprio this
.