Skip to content →

Mini guida su ES6 – Perchè dovremmo usare le flat arrow functions?

In questo post, analizzeremo nel dettaglio le Arrow functions con vari esempi, vantaggi e svantaggi sul loro utilizzo e molto altro.

Arrow functions (o più comunemente conosciute come “fat arrow functions”) sono senza dubbio una delle funzionalità più popolari di ES6. Hanno introdotto un nuovo modo di scrivere funzioni concise e leggibili.

Mettiamo a confronto questa funzione scritta con ES5

function timesTwo(params) {
 return params * 2
 }
 timesTwo(4);  // 8

e questa utilizzando la fat arrow:

var timesTwo = params => params * 2
 timesTwo(4);  // 8

È molto più breve!

Siamo in grado di omettere le parentesi graffe e la dichiarazione di ritorno a causa di ritorni impliciti (ma solo se non vi è alcun blocco – ma lo vedremo più avanti).

Voglio sottolineare che la fat arrow non sostituisce al 100% le funzioni classiche  ma come vedremo ci sono casi in cui ha senso e casi in cui non è consigliato.

Differenze con le funzioni classiche scritte con sintassi ES5

1. Nessun parametro
Se non ci sono parametri, puoi mettere una parentesi vuota prima =>

() => "Ciao Valerio"

2. Singolo parametro
Le parentesi con questo tipo di funzioni sono facoltative:

x => 42  || (x) => 42

3. Più parametri
In questo caso le parentesi sono obbligatorie:

(x,y) => 32

4. Dichiarazioni (al contrario delle espressioni)
In generale possiamo dire che una expression function produce un valore, mentre una function statement esegue un’azione.
Utilizzando l’approccio delle fat arrow, è importante ricordare che le istruzioni devono essere all’interno delle parentesi graffe. Di conseguenza, una volta che il blocco di istruzioni è all’interno delle parentesi, è necessario avere la keyword return.

const foundString = (value) => {
 if (value === "valerio") {
 return "value is found";
 } else {
 return "value is not found";
 }
 } 

5. Body “bloccato”
Se la tua funzione è in un “blocco”, tu devi usare esplicitamente la dichiarazione return.

let addValues = (x, y) => {
 return x + y
 }

6. Oggetti “literals”
Se stai restituendo un oggetto “literal”, deve essere racchiuso tra parentesi. Questo “costringe” l’interprete a valutare cosa c’è dentro le parentesi e viene restituito il literal dell’oggetto.

x =>({ y: x })

Benefici

Nessun binding di this

Nelle classiche espressioni di funzioni, this è associata a valori diversi in base al contesto in cui viene chiamata. Utilizzando le fat arrow, this è “legato lessicamente”. Questo significa che this si usa dal codice che contiene la fat arrow.

Facciamo un esempio pratico per chiarire meglio il concetto:

// ES5
 var obj = {
 id: 42,
 counter: function counter() {
 setTimeout(function() {
 console.log(this.id);
 }.bind(this), 1000);
 }
 };

In questo esempio, .bind (this) è richiesto per aiutare a passare questo contesto nella funzione. Altrimenti, di default this sarebbe undefined.

Se consideriamo un esempio con ES6:

// ES6
 var obj = {
 id: 42,
 counter: function counter() {
 setTimeout(() => {
 console.log(this.id);
 }, 1000);
 }
 };

Non dobbiamo effettuare il bind di this. Esso verrà associato “lessicamente” a prendere il contesto in cui viene definito.

Quando dovremmo usare la fat arrow

Le fat arrow rendono al meglio con tutto ciò che richiede che la keyword this sia legata al contesto e non alla funzione stessa.

Nonostante siano anonime, io le preferisco anche per metodi come map e reduce.
Rendono il codice molto più leggibile.

Quando NON dovremmo usare la fat arrow

Dopo aver appreso un po ‘di più sulle fat aeeow, spero che tu abbia capito che non sostituiscono le normali funzioni.

Quindi possiamo catalogare con una lista quando non utilizzare (o non dovremmo) le fat arrow:

1. Funzioni di callback con contenuti dinamici

let button = document.getElementById('press');
 button.addEventListener('click', () => {
 this.classList.toggle('on');
 });

2. Metodi di oggetti


Se clicchiamo sul pulsante, otterremmo un errore TypeError. È perché this non è legato al pulsante, ma è legato al suo parent.

var cat = {
 lives: 9,
 jumps: () => {
 this.lives--;
 }
 }


Quando chiami cat.jumps, il numero di vite (lives) non diminuisce. È perché this non è legato a nulla, ed eredita il valore di this dal suo parent.

3. Quando il codice diventa poco leggibile

Tendenzialmente questo dipende dalla tua codebase. L’obiettivo è sempre avere un codice pulito e leggibile (con o senza le fat arrow).

Spero questo articolo sia stato utile. Se si, condividilo con i tuoi amici, colleghi o con chi ritieni che possa essere interessato.

PS. Se sei interessato a conoscere in anticipo gli argomenti per i prossimi appuntamenti, ti consiglio di visitare il primo articolo

Published in Series

Comments

Lascia un commento

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