Funzioni freccia in

Informazioni su Funzioni freccia

Oltre alle dichiarazioni di funzione ed alle espressioni di funzione, JavaScript ha anche un'altra sintassi molto concisa per definire una funzione. Queste funzioni sono chiamate arrow function.

In questo concetto, ci concentreremo sulla sintassi usata per scrivere una arrow function. Ci sono differenze nel modo in cui funziona una arrow function, come il binding di this, che verranno trattate in altri concetti.

Ecco un confronto tra una dichiarazione di funzione e una arrow function.

function addUpTwoNumbers(num1, num2) {
  return num1 + num2;
}

// function keyword removed and => added
const addUpTwoNumbers = (num1, num2) => {
  return num1 + num2;
};

Qui sopra puoi vedere che la sintassi della arrow function:

1. rimuove la parola chiave function
2. dichiara l'identificatore addUpTwoNumbers come const
3. aggiunge una freccia =>

Se il corpo della funzione contiene solo un'istruzione return, come nell'esempio qui sopra, si possono omettere le parentesi graffe ({}) e la parola chiave return.

const addUpTwoNumbers = (num1, num2) => { return num1 + num2 };

// can be shortened to
const addUpTwoNumbers = (num1, num2) => num1 + num2;
// braces {} and return removed

Nel caso particolare in cui una arrow function restituisce solo un oggetto, servono le parentesi attorno all'oggetto per poter omettere l'istruzione return.

// explicit return of object
const addUpTwoNumbers = (num1, num2) => {
  return { num1, num2 };
};

// implicit return of object
const addUpTwoNumbers = (num1, num2) => ({ num1, num2 });

L'uso delle parentesi attorno ai parametri dipende dal numero di parametri.

// one parameter does not need parenthesis
const square = num => num * num;

// two or more parameters need to be wrapped in parenthesis
const addUpTwoNumbers = (num1, num2) => num1 + num2;

Altri concetti come Parametri rest e Destrutturazione possono essere usati anche con una arrow function.