JavaScript
HTML
CSS
PHP
Coming Soon
Generatori
Varie & Old

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

CODE: Javascript preleva codice
  1. // Funzione tradizionale
  2. function somma(a, b) {
  3.   return a + b;
  4. }
  5.  
  6. // Arrow function
  7. const sommaArrow = (a, b) => a + b;
  8.  
  9. console.log(somma(5, 3));      // Output: 8
  10. 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

CODE: Javascript preleva codice
  1. const calcolaArea = (larghezza, altezza) => {
  2.   let area = larghezza * altezza;
  3.   return area;
  4. };
  5.  
  6. 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

CODE: Javascript preleva codice
  1. function Persona(nome) {
  2.   this.nome = nome;
  3.  
  4.   // Funzione tradizionale
  5.   setTimeout(function() {
  6.     console.log("Ciao, sono " + this.nome); // this è undefined
  7.   }, 1000);
  8.  
  9.   // Arrow function
  10.   setTimeout(() => {
  11.     console.log("Ciao, sono " + this.nome); // this è l'oggetto Persona
  12.   }, 2000);
  13. }
  14.  
  15. 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.


I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies