Funzioni e notazione Arrow Function

La sinatassi abbreviata per inserire delle funzioni anonime all'interno di un'applicazione Angular

Ultimo aggiornamento: 7 giorni fa

Una notazione che verrà spesso utilizzata all'interno del codice di un'applicazione Angular, è quella che prende il nome di "funzione freccia". Quando in JavaScript si devono raggruppare delle istruzioni da far eseguire insieme solo se richiamate esplicitamente, si usano le funzioni. La sintassi di una funzione in JavaScript é:

function mostroarticoli(categoria) {
   // elenco istruzioni sugli articoli
   ....
   return listaarticoli;
}

Abbiamo utilizzato la parola chiave function e poi abbiamo fatto seguire il nome da dare alla funzione. All'interno delle parentesi abbiamo inserito un ipotetico parametro d'ingresso, ma chiaramento potrei passarne più di uno. In molte situazioni - vedi invio/ ricezione di dati remoti via HTTP - la funzione è automaticamente richiamata da un altro pezzo di codice, quindi non sempre è necessario dargli un nome. Per questo motivo è stata inventata una notazione abbreviata, legata a funzioni anonime. In sostanza si omette sia la parola chiave function, che il nome della funzione, e al posto si inserisce il simbolo =>.

Esempio di funzione con la sintassi a "freccia":

(categoria) => {
  return listaarticoli
}

Come vedi è molto simile alla sintassi di una funzione classica, ma sicuramente è più veloce da scrivere in certe situazioni. Qui sotto un elenco di possibili sintassi da utilizzare ad esempio all'interno di un'applicazione Angular:

a) Sintassi con una singola istruzione

In questo caso è possibile omettere le parentesi graffe.

(categoria) => listaarticoli

è del tutto equivalente a scrivere:

(categoria) => { return listaarticoli; }

b) Sintassi con un solo parametro di ingresso

Nel caso la funzione riceva un solo paramentro in ingresso, allora potresti omettere anche le parentesi tonde:

categoria => { listaarticoli }

Come vedi un bel risparmio di caratteri, rispetto alla defini...

Ohps... scusami la fastidiosa interruzione, ma per questioni gestionali, tutti i tutorial completi gli ho spostati a questo link: WEBSU. Risulterà più semplice anche per te seguirli e chiedermi dei consigli. Ti aspetto, dai... bastano 5 secondi. Non buttare tutto lo sforzo fatto per arrivare qui.

Hai tempo per leggere? Angular

Non farti scappare il mio libro appena aggiornato: "Angular 100% Operativo". Un corso completo su Angular per imparare rapidamente le tecniche per creare WebAPP e non solo. Prenotalo cliccando l'immagine qui sotto

Categoria: Angular