Categorie
Javascript Programmazione

{JS} Arrow Functions

Cosa sono le Arrow Functions?

ES6 ha introdotto un nuova sintassi e un nuovo concetto di funzione denominato funzione-freccia o “Arrow Functions”;
Si contraddistingue per una sintassi molto coincisa ed è normalmente per la definizione di funzioni anonime.

Definizione di una funzione freccia

Funzione anonima

function (x) {
  return x + x;
}

Nel box qui sopra abbiamo definito una funzione con la normale sintassi utilizzata finora:
Attraverso la parola chiave “function” abbiamo indicato la creazione di una nuova funzione; non abbiamo indicato alcun nome, quindi, stiamo creando una funzione anonima; all’interno delle parentesi tonde “( )” abbiamo previsto un unico parametro “x” da passare alla funzione; ed in fine, all’interno delle parentesi graffe “{ }” abbiamo inserito le istruzioni che dovrà compiere.

Con la nuova sintassi delle “Arrow Fuctions” avremmo potuto definire la medesima funzione così:

x => { return x + x } 

ma anche in quest’altro modo:

x => x + x

E’ evidente che, nei precedenti esempi, viene a mancare la keyword “function”, già contenuta in “=>”; si parte quindi con il definire la funzione partendo dal proprio parametro e inserendo dopo il simbolo “=>” le istruzione da eseguire.

Funzione non-anonima

Siamo partiti con il confrontare ed analizzare, per facilità di comprensione, le diverse sintassi di una funzione anonima; viene da chiedersi, quindi, come definire una funzione a cui vogliamo attribuire un nome:

var nuovaFunzione = x => { return x + x };

/* oppure */

var nuovaFunzione = x => x + x;

Per associare un nome ad una funzione creata con la sintassi “funzione-freccia” è necessario racchiuderla in una variabile.
Come abbiamo già in precedenza visto, è possibile invocare una funzione contenuta in una variabile facendo seguire al nome della variabile contenitrice le parentesi tonde “( )”

var risultato = nuovaFunzione(10); 

Parametri

Un altra quesito che sicuramente ci verrà in mente, riguarda il come comportarci di fronte ad una funzione che non prevede parametri o che prevede più di un paramento:

Sintassi senza parametri

() => { istruzioni };
/* oppure */
var nuovaFunzione = () => { istruzioni };

Sintassi con unico parametro

x => { istruzioni };
/* oppure */
var nuovaFunzione = x => { istruzioni }; 

Sintassi con più parametri

(x, y) => { istruzioni };
/* oppure */
var nuovaFunzione = (x, y) => { istruzioni };

Sintassi abbreviata

Nei precedenti esempi abbiamo implicitamente mostrato la possibilità di omettere keywords e caratteri nella sintassi.
Di seguito mostriamo la sintassi completa di una funzione freccia ed elenchiamo le possibili omissioni:

(x) => { return x + x };

Sintassi abbreviata:

x => x + x;
( )E’ possibile omettere le parentesi tonde in presenza di un unico parametro; invece è necessario prevederle in assenza di parametri e in presenza di più di un parametro
{ }Le parentesi graffe servono a racchiudere le istruzioni ma risultano in ogni caso facoltative.
returnLa parola chiave “return” e la restituzione di un valore è implicita.

Quanto detto è tutto vero ma è necessario includere un ulteriore regola:
Se optiamo per l’utilizzo delle parentesi graffe “{ }” è obbligatorio l”utilizzo della keyword “return”.

x => { return x + x };

L’utilizzo delle parentesi graffe risulta necessario quando abbiamo di fronte funzioni “corpose”; si pensi ad una funzione con l’istruzione If..else:

var maggioreEta = (eta) => {
  if (eta >= 18) {
    return 'La persona è maggiorenne';
  } else {
    return 'La perona è minorenne';
  }
}

var verifica = maggioreEta(19);
document.write(verifica);

this nelle funzioni freccia

A differenza delle comuni funzioni dove abbiamo visto che this fa riferimento all’oggetto globale, nelle funzioni-freccia, il valore di this viene cercato da prima nello scope corrente e se non trovato, successivamente lo ricerca nello scope contenitore.

Nelle funzioni dichiarate con function ogni funzione, definiva un proprio this, ossia il contesto al quale faceva riferimento, questo comportamento non è così nella funzioni a freccia che invece mantengono il this corrente o ereditato.

Note: Per selezionare un differente this possiamo assegnare il this ad una variabile that  "var that = this;"

Differenze tra Arrow function & Classic function

assenza di argumentsnelle funzioni tradizionali ricordiamo essere un particolare Array che corrisponde ai parametri passati alla funzione
no metodinon è possibile usare le funzioni a freccia come metodi
no costruttorinon è possibile usare le funzioni a freccia come costruttori; sarà restituito errore se utilizzate l’operatore new

Funzioni di callback con Arrow Functions

Data la sintassi compatta delle arrow function, esse si prestano molto bene ad essere utilizzate come callback.

var array= [18, 13, 24];
array.forEach(function(valore) {
	console.log(valore);
});

Potremo quindi semplificare la sintassi cosi:

var array= [18, 13, 24];
array.forEach(valore => console.log(valore));

Abbiamo ridotto ai minimi termini la sintassi della funzione di callback sfruttando la sintassi delle arrow function.

Link utili:

https://www.mrw.it/javascript/arrow-function-funzioni-freccia_12693.html
https://www.antonioscatoloni.it/blog/2017/06/30/javascript-es6-funzioni-a-freccia
https://www.javascripttutorial.net/javascript-this/
https://www.html.it/pag/63267/arrow-function/

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *