Skip to content
Freewebsolution
Menu
  • Home
  • angular
  • php
  • guide
  • laravel
  • react
  • corsi
Freewebsolution
Menu
arrow-function

Le arrow function o funzioni freccia -#4

Posted on 8 Maggio 2019 by lucio
Category: angular, Corso typescript, guide
3.029 views 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:

  1. Sintassi  a singola istruzione
(category) => news;

la stessa funzione si potrebbe anche scrivere nel seguente modo:

(category) => {return news ;}
  1. Esempio di sintassi con un solo parametro in ingresso

dove si potrebbero omettere le parentesi tonde:

category=> {news};
  1. 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.

Lucio Ticali

Lucio Ticali - Insegnante su Udemy

Hi, I'm Lucio Ticali, author of this blog. I am a Full stack developer and Udemy Instructor with over 20 years of experience in the Information Technology sector.

Ultime da Freeweb

  • Creare un’applicazione di e-commerce con Laravel e Stripe
  • Come integrare Stripe con Laravel 11
  • Realizza il gioco del solitario con React e Laravel: Parte 1
  • Creare Interfacce Dinamiche con Laravel 11 e Livewire 3: Guida Passo-Passo
  • Come creare una Progressive Web App (PWA) con Laravel 11

Corsi da non perdere

Laravel: La guida pratica e completa da neofita ad esperto

€ 9.99 / €12.99 guida_laravel guida completa

Ebook da non perdere

Laravel 11 dall'idea al codice

€ 9.99 / €21.99 laravel 11: dall'idea al codice

©Copyright 2025 - Freewebsolution. All rights reserved, Lucio Ticali Lucio ticali Udemy instructor instructor. Privacy-Informativa cookies