Tempo di lettura: 2 minuti
Le arrow function o funzioni freccia sono utilizzate spesso in Angular e sono una notazione abbreviata delle funzioni anonime.
Le funzioni non sono altro che un insieme di istruzioni da far eseguire nel momento in cui queste vengono richiamate esplicitamente, in javascript ad esempio la sintassi è la seguente:
function news(category) {
//istruzioni relative alle news
...
return listanews
}
come potete notare si utilizza la parola function seguita dal nome della funzione. All’interno delle parentesi ho inserito un parametro di ingresso anche se avrei potuto inserirne più di uno.
Quando utilizzare le arrow function
Ne casi in cui le funzioni sono richiamate da altre porzioni di codice ,come ad esempio l’invio o ricezione dei dati via HTTP, non è necessario assegnargli un nome.
Per tale motivo è stata introdotta una notazione abbreviata di queste legata alle funzioni anonime dove si omette sia la parola chiave function, che il nome della funzione stessa ed al loro posto si inserisce il simbolo =>.
Esempio di funzione a freccia
(category) => {
return news;
}
Come puoi notare è molto semplice e più veloce da scrive rispetto ad una classica funzione.
Vediamo degli esempi di arrow function da utilizzare nelle applicazioni Angular:
- Sintassi a singola istruzione
(category) => news;
la stessa funzione si potrebbe anche scrivere nel seguente modo:
(category) => {return news ;}
- Esempio di sintassi con un solo parametro in ingresso
dove si potrebbero omettere le parentesi tonde:
category=> {news};
- In assenza di parametri in ingresso
In questo caso è necessario specificare le parentesi tonde:
() => {news;}
In caso di istruzione singola nel corpo della funzione:
() => news
La parola return è facoltativa (viene chiamata “sintassi concisa”).
Inoltre è necessario fare molta attenzione con gli oggetti literal in quanto si rischia di fare confusione con le parentesi graffe:
let func = () => ({id:1});
Assegno alla variabile func una funzione che non riceve alcun valore in ingresso e restituisce un oggetto. Il tutto deve essere racchiuso tra parentesi tonde.
Ricordati che il simbolo => non può andare a capo.