Le Promise sono un concetto molto importante per le operazioni asincrone in JavaScript. Forse pensi che le promise non siano così facili da capire, apprendere e usare. E credimi non sei il solo!

Le Promise sono impegnative per molti sviluppatori web, anche dopo anni passati a usarle.

In questo articolo, cercherò di cambiare questa percezione e condividere quello che ho imparato sulle Promise in JavaScript negli ultimi anni. Spero che ti sia utile.

Cos'è una Promise in JavaScript?

Una Promise è un'oggetto speciale in JavaScript. Produce un valore quando un'operazione asincrona viene completata con successo, o un errore se non è completata con successo a causa di un  timeout, un errore di rete, e via dicendo.

Una chiamata riuscita è indicata dalla chiamata della funzione resolve, mentre gli errori sono indicati dalla chiamata della funzione reject.

Puoi creare una promise usando il costruttore Promise in questo modo:

let promise = new Promise(function(resolve, reject) {    
    // Esegui delle operazioni asincrone, quindi chiama resolve o reject
});

Nella maggior parte dei casi, una promise si usa per un'operazione asincrona. Tuttavia, tecnicamente, puoi risolvere/rifiutare sia operazioni sincrone che asincrone.

Aspetta un momento, non abbiamo già le funzioni callback per le operazioni asincrone?

Esatto! In JavaScript esistono le funzioni callback. Ma, una callback non è niente di speciale. È una normale funzione che produce un risultato al completamento di un'operazione asincrona.

La parola 'asincrona' significa che una cosa succede nel futuro, non adesso. Normalmente, le callback si usano solamente per operazioni di rete, o caricare/scaricare file, consultare una base di dati, o cose del genere.

Nonostante le callback siano utili, hanno anche un grande svantaggio. In alcuni casi, possiamo avere una callback dentro un'altra callback dentro un'altra callback, e così via. Dico davvero! Cerchiamo di capire questo "inferno di callback" con un esempio.

Come evitare l'Inferno di callback – Esempio con PizzaHub

Ordiniamo una pizza Margherita Veg🍕 da PizzaHub. Quando facciamo un ordine, PizzaHub individua automaticamente la nostra posizione geografica, trova una pizzeria nei dintorni e controlla se la pizza che vogliamo è disponibile.

Se è disponibile individua che tipo di bibita possiamo avere gratis con la pizza, e finalmente invia l'ordine.

Se l'ordine va a buon fine, riceviamo un messaggio di conferma.

Quindi, come possiamo scrivere un codice per queste operazioni usando le funzioni callback? Io ho pensato a qualcosa del genere:

function orderPizza(type, name) {
    
    // Chiedi a pizzahub di trovare un ristorante
    query(`/api/pizzahub/`, function(result, error){
       if (!error) {
           let shopId = result.shopId;
           
           // Contatta il ristorante e chiedi le pizze
           query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
               if (!error) {
                   let pizzas = result.pizzas;
                   
                   // Controlla se la pizza è dsponibile
                   let myPizza = pizzas.find((pizza) => {
                       return (pizza.type===type && pizza.name===name);
                   });
                   
                   // Controlla le bibite gratis
                   query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
                       if (!error) {
                           let beverage = result.id;
                           
                           // Prepara l'ordine
                           query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
                              if (!error) {
                                  console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
                              } else {
                                  console.log(`Bad luck, No Pizza for you today!`);
                              }
                           });

                       }
                   })
               }
           });
       } 
    });
}

// Chiama il metodo orderPizza
orderPizza('veg', 'margherita');

Esaminiamo meglio la funzione orderPizza.

Chiama una API per ottenere l'id del ristorante più vicino. Dopodiché, riceve la lista delle pizze disponibili nel ristorante. Controlla che la pizza che vogliamo è fra le disponibili e fa un'altra richiesta all'API per cercare le bibite da abbinare alla pizza. E infine invia l'ordine.

Qui stiamo usando una callback per ogni richiesta inviata all'API. Questo ci porta a dover usare una callback dentro un'altra callback, dentro un'altra callback, e così via.

Andiamo verso quello che chiamiamo (molto pittorescamente) inferno di callback. E penso che non piaccia a nessuno. Inoltre forma una piramide di codice che è fonte di confusione ma anche di possibili errori.

Ci sono vari modi per uscire dall'inferno di callback (o per non entrare).  Il modo più comune è appunto quello di usare una Promise o una funzione async. Tuttavia, per capire bene cosa sia una funzione async, hai bisogno prima di avere una conoscenza sufficiente delle promise.

Quindi iniziamo e tuffiamoci nelle promise.

Comprendere gli stati delle Promise

Riassumendo, una promise può essere creata con la sintassi del costruttore (constructor), in questo modo:

let promise = new Promise(function(resolve, reject) {
  // Codice da eseguire
});

Il costruttore ha come argomento una funzione. Quest'ultima funzione si chiama funzione esecutrice (executor).

// Funzione esecutrice passata come argomento
// al costruttore della promise
function(resolve, reject) {
    // la logica va qui...
}

La funzione esecutrice accetta due argomenti, resolve e reject. Queste sono le callback fornite dal linguaggio JavaScript stesso. La logica del tuo programma va inserita nel corpo della funzione esecutrice che viene eseguita automaticamente quando una nuova promise è creata con la parola chiave new.

Per essere effettiva, la funzione executor della promise deve chiamare una delle due callback, resolve o reject. Entreremo nei dettagli più avanti.

La funzione constructor new Promise() restituisce un oggetto promise. Siccome la funzione executor gestisce operazioni asincrone, l'oggetto promise deve avere la capacità di informare quando l'esecuzione ha inizio, quando viene completata (resolved) o quando restituisce un errore (rejected).

Un oggetto promise possiede le seguenti proprietà interne:

1. state – Questa proprietà può avere i seguenti valori:

• pending: il valore iniziale quando inizia l'esecuzione della funzione esecutrice (in sospeso).
• fulfilled: quando la promise è risolta.
• rejected: quando la promise è rifiutata.

2.  result – Questa proprietà può avere i seguenti valori:

• undefined: il valore iniziale quando la proprietà state ha valore pending.
• valore: quando viene chiamata resolve(valore).
• errore: quando viene chiamata reject(errore).

Queste proprietà interne, sono inaccessibili da un codice esterno, ma sono ispezionabili. Ovvero possiamo ispezionare il valore delle proprietà state e result con gli strumenti di debug, ma non possiamo accedervi direttamente tramite il programma.

Lo stato di una promise può essere pending (sospesa), fulfilled (soddisfatta) o rejected (respinta, rifiutata). Una promise risolta o rifiutata viene chiamata settled (conclusa).

Come si risolve o si rifiuta una promise

Ecco un esempio di una promise risolta (stato fulfilled) immediatamente con il valore I am done.

let promise = new Promise(function(resolve, reject) {
    resolve("I am done");
});

La seguente promise è rifiutata (stato rejected) con il messaggio di errore Something is not right!.

let promise = new Promise(function(resolve, reject) {
    reject(new Error('Something is not right!'));
});

Una cosa importante da notare:

La funzione executor di una Promise deve chiamare solo una volta resolve o reject. Una volta che lo stato passa da pending a fulfilled o da pending a rejected, è tutto. Qualsiasi ulteriore chiamata di resolve o reject viene ignorata.

let promise = new Promise(function(resolve, reject) {
  resolve("I am surely going to get resolved!");

  reject(new Error('Will this be ignored?')); // ignorato
  resolve("Ignored?"); // ignorato
});

Nell'esempio precedente, solo la prima chiamata di resolve avviene, mentre il resto viene ignorato.

Come gestire una Promise una volta creata

Una Promise utilizza una funzione executor per completare un'operazione (di solito asincrona). Una funzione che usa il risultato di una promise, dovrebbe essere avvertita quando la funzione executor ha terminato il suo lavoro chiamando resolve o reject.

I metodi .then(), .catch() e .finally(), servono per creare questo collegamento fra la funzione executor e la funzione che consuma la promise (consumer), in modo tale che possano essere sincronizzate quando la promise è risolta o rifiutata.

Come usare il metodo .then()

Il metodo .then() dovrebbe essere chiamato sull'oggetto promise per gestire un risultato (resolve) o un errore (reject).

Il metodo accetta due funzioni come parametri. Normalmente, il metodo .then() viene chiamato dalla funzione consumer quando vuoi conoscere il risultato dell'esecuzione di una promise.

promise.then(
  (result) => { 
     console.log(result);
  },
  (error) => { 
     console.log(error);
  }
);

Se ti interessa solo il risultato in caso di successo, puoi passare un solo argomento, in questo modo:

promise.then(
  (result) => { 
      console.log(result);
  }
);

Se ti interessa solo il risultato in caso di errore, puoi passare null come primo argomento, in questo modo:

promise.then(
  null,
  (error) => { 
      console.log(error)
  }
);

In ogni caso, puoi gestire meglio gli errori usando il metodo .catch() che vedremo in un minuto.

Vediamo un paio di esempi di come gestire i risultati e gli errori usando i metodi .then e .catch. Vediamo di rendere le cose un po' più divertenti con delle richieste asincrone reali. Useremo la PokeAPI per richiedere informazioni sui Pokémon e gestire i risultati con le promise e le funzioni resolve/reject.

Per prima cosa, creiamo una funzione generica che accetta un URL della PokeAPI come argomento e ritorna una promise. Se la richiesta alla API ha successo, restituiremo una promise risolta (resolved). In caso di errore, restituiremo una promise rifiutata (rejected).

D'ora in poi useremo questa funzione in vari esempi per ottenere una promise e lavorare con essa.

function getPromise(URL) {
  let promise = new Promise(function (resolve, reject) {
    let req = new XMLHttpRequest();
    req.open("GET", URL);
    req.onload = function () {
      if (req.status == 200) {
        resolve(req.response);
      } else {
        reject("There is an Error!");
      }
    };
    req.send();
  });
  return promise;
}

Esempio 1: ottieni informazioni su 50 Pokémon:

const ALL_POKEMONS_URL = 'https://pokeapi.co/api/v2/pokemon?limit=50';

// Abbiamo già parlato di questa funzione!
let promise = getPromise(ALL_POKEMONS_URL);

const consumer = () => {
    promise.then(
        (result) => {
            console.log({result}); // Registra il risultato di 50 Pokemons
        },
        (error) => {
            // Visto che l'URL è valido, questa funzione non sarà chiamata.
            console.log('We have encountered an Error!'); // Registra un errore
    });
}

consumer();

Esempio 2: proviamo con URL non valido

const POKEMONS_BAD_URL = 'https://pokeapi.co/api/v2/pokemon-bad/';

// Questa promise sarà rifiutata perché l'URL è 404
let promise = getPromise(POKEMONS_BAD_URL);

const consumer = () => {
    promise.then(
        (result) => {
            // La promise non è risolta. Quindi, questa funzione
            // non sarà eseguita.
            console.log({result});
        },
        (error) => {
            // Una promise rifiutata eseguirà questa funzione
            console.log('We have encountered an Error!'); // Registra un errore
        }
    );
}

consumer();

Come usare il metodo .catch()

Puoi usare questo metodo per gestire gli errori in una promise. La sintassi di passare null come primo argomento di .then() non è esattamente un gran modo di gestire gli errori. Per questo abbiamo .catch() per eseguire lo stesso lavoro con una sintassi più pulita:

// Questa promise sarà rifiutata perché l'URL è 404
let promise = getPromise(POKEMONS_BAD_URL);

const consumer = () => {
    promise.catch(error => console.log(error));
}

consumer();

Se lanciamo un errore come new Error("Something wrong!") invece di chiamare reject dalla funzione executor, sarà considerato comunque un rifiuto. Ovvero l'errore sarà intercettato dal metodo .catch.

Lo stesso succede per ogni eccezione sincrona che avviene nella funzione executor o in una funzione di gestione.

Questo è un esempio in cui un errore viene trattato come un rifiuto e il metodo .catch viene chiamato:

new Promise((resolve, reject) => {
  throw new Error("Something is wrong!");// nessuna chiamata di reject
}).catch((error) => console.log(error)); 

Come usare il metodo .finally()

Il metodo .finally() svolge operazioni di pulizia come interrompere un caricamento, chiudere una connessione attiva, e così via. Il metodo finally() viene chiamato a prescindere del fatto che una promise sia risolta o rifiutata. Passa il risultato o l'errore al gestore seguente, che a sua volta potrà chiamare .then() o .catch().

Questo è un esempio che ti aiuterà a capire i tre metodi insieme:

let loading = true;
loading && console.log('Loading...');

// Ottieni la promise
promise = getPromise(ALL_POKEMONS_URL);

promise.finally(() => {
    loading = false;
    console.log(`Promise Settled and loading is ${loading}`);
}).then((result) => {
    console.log({result});
}).catch((error) => {
    console.log(error)
});

Per spiegare meglio:

• Il metodo .finally() cambia il valore di loading in false.
• Se la promise è risolta, il metodo .then() viene chiamato. Se la promise è rifiutata con un errore, viene chiamato il metodo .catch(). Il metodo .finally() sarà chiamato comunque a prescindere che la promise sia risolta o rifiutata.

Cos'è la catena di Promise?

La chiamata promise.then() restituisce sempre una promise. Questa promise avrà la proprietà state con valore pending e result sarà undefined. Ci permette chiamare il metodo .then sulla nuova promise.

Quando il primo .then restituisce un valore, il seguente .then può ricevere questo valore. Il secondo .then  può passarlo al terzo e così via. Tutto questo forma una catena di .then che trasmette le promise. Questo fenomeno viene chiamato promise chain (catena di promise).

Ecco un esempio:

let promise = getPromise(ALL_POKEMONS_URL);

promise.then(result => {
    let onePokemon = JSON.parse(result).results[0].url;
    return onePokemon;
}).then(onePokemonURL => {
    console.log(onePokemonURL);
}).catch(error => {
    console.log('In the catch', error);
});

Qui per prima cosa otteniamo una promise risolta e quindi estraiamo l'URL per raggiungere il primo Pokémon. Quindi restituiamo questo valore che viene passato come promise al seguente metodo .then(). E dunque il risultato:

https://pokeapi.co/api/v2/pokemon/1/

Il metodo .then può restituire:

• Un valore (già abbiamo visto questo caso)
• Oppure una nuova promise.

Inoltre può anche dare un errore.

Ecco un esempio in cui creiamo una catena di promise con vari metodi .then che restituiscono dei risultati e una nuova promise:

// Catena di promise con then e catch multipli
let promise = getPromise(ALL_POKEMONS_URL);

promise.then(result => {
    let onePokemon = JSON.parse(result).results[0].url;
    return onePokemon;
}).then(onePokemonURL => {
    console.log(onePokemonURL);
    return getPromise(onePokemonURL);
}).then(pokemon => {
    console.log(JSON.parse(pokemon));
}).catch(error => {
    console.log('In the catch', error);
});

Nel primo .then estraiamo l'URL e restituiamo il suo valore. Questo URL viene passato al secondo .then che restituisce una nuova promise che prende l'URL come argomento.

Quest'ultima promise viene risolta e trasmessa nella catena dove otteniamo le informazioni sul Pokémon. Questo è il risultato:

Nel caso in cui ci fosse un errore o una promise rifiutata, il metodo .catch nella catena verrebbe chiamato.

Un punto importante: chiamare .then più volte non forma una catena di promise. Potresti finire per introdurre un bug nel codice:

let promise = getPromise(ALL_POKEMONS_URL);

promise.then(result => {
    let onePokemon = JSON.parse(result).results[0].url;
    return onePokemon;
});
promise.then(onePokemonURL => {
    console.log(onePokemonURL);
    return getPromise(onePokemonURL);
});
promise.then(pokemon => {
    console.log(JSON.parse(pokemon));
});

Abbiamo chiamato il metodo .then tre volte sulla stessa promise, ma non abbiamo trasmesso la promise. Questo è diverso dalla catena di promise. Nell'ultimo esempio, Il risultato sarebbe un errore.

Come gestire promise multiple

Oltre ai gestori (.then, .catch e .finally), esistono sei metodi statici disponibili nella API Promise. I primi quattro metodi accettano un array di promise e le eseguono in parallelo.

1. Promise.all
2. Promise.any
3. Promise.allSettled
4. Promise.race
5. Promise.resolve
6. Promise.reject

Vediamoli uno a uno.

Il metodo Promise.all()

Promise.all([promise]) accetta una collezione (per esempio, un array) di promise come argomento e le esegue in parallelo.

Questo metodo aspetta fino a che tutte le promise siano risolte e ritorna un array con i loro risultati. Se una qualsiasi di queste promise viene rifiutata o non viene eseguita a causa di un errore, i risultati di tutte le altre vengono ignorati.

Creiamo tre promise per ottenere informazioni su tre Pokémon.

const BULBASAUR_POKEMONS_URL = 'https://pokeapi.co/api/v2/pokemon/bulbasaur';
const RATICATE_POKEMONS_URL = 'https://pokeapi.co/api/v2/pokemon/raticate';
const KAKUNA_POKEMONS_URL = 'https://pokeapi.co/api/v2/pokemon/kakuna';


let promise_1 = getPromise(BULBASAUR_POKEMONS_URL);
let promise_2 = getPromise(RATICATE_POKEMONS_URL);
let promise_3 = getPromise(KAKUNA_POKEMONS_URL);

E usiamo il metodo Promise.all() passando un array di promise.

Promise.all([promise_1, promise_2, promise_3]).then(result => {
    console.log({result});
}).catch(error => {
    console.log('An Error Occured');
});

Risultato:

Come puoi vedere, viene restituito il risultato di tutte le promise. Il tempo di esecuzione di tutte le promise è uguale al tempo massimo di esecuzione della promise più "lenta".

Il metodo Promise.any()

Promise.any([promise]) - Simile al metodo all(), anche .any() accetta un array di promise da eseguire in parallelo. Però questo metodo non aspetta che tutte le promise siano risolte. Termina quando una qualsiasi delle promise è conclusa.

 Promise.any([promise_1, promise_2, promise_3]).then(result => {
     console.log(JSON.parse(result));
 }).catch(error => {
     console.log('An Error Occured');
 });

Il risultato sarà il risultato di una delle promise risolte:

Il metodo Promise.allSettled()

Promise.allSettled([promise]) - Questo metodo aspetta che tutte le promise siano concluse (risolte o rifiutate) e ritorna i loro risultati come un array di oggetti. I risultati conterranno la stato (fulfilled/rejected) e il valore, se lo stato è fulfilled. Nel caso in cui lo stato sia rejected, ritornerà la ragione dell'errore.

Ecco un esempio di tutte promise con stato fulfilled:

Promise.allSettled([promise_1, promise_2, promise_3]).then(result => {
    console.log({result});
}).catch(error => {
    console.log('There is an Error!');
});

Risultato:

Se qualcuna delle promise fosse rifiutata, per esempio la promise_1,

let promise_1 = getPromise(POKEMONS_BAD_URL);

Il metodo Promise.race()

Promise.race([promises]) – Aspetta la prima promise (la più veloce) a essere conclusa, e ritorna il risultato/errore di conseguenza.

Promise.race([promise_1, promise_2, promise_3]).then(result => {
    console.log(JSON.parse(result));
}).catch(error => {
    console.log('An Error Occured');
});

Il risultato sarà la promise che viene risolta più rapidamente:

I metodi Promise.resolve/reject

Promise.resolve(value) – Risolve una promise con il valore passato come argomento. È equivalente al seguente codice:

let promise = new Promise(resolve => resolve(value));

Promise.reject(error) – Rifiuta una promise con l'errore passato come argomento. È equivalente al seguente codice:

let promise = new Promise((resolve, reject) => reject(error));

Possiamo riscrivere l'esempio di PizzaHub con le promise?

Certo che sì, facciamolo. Supponiamo che il metodo query ritorni una promise. Nella vita reale, questo metodo potrebbe comunicare con un database e restituire i risultati. In questo caso, restituisce un risultato predeterminato, ma va bene per il nostro esempio.

function query(endpoint) {
  if (endpoint === `/api/pizzahub/`) {
    return new Promise((resolve, reject) => {
      resolve({'shopId': '123'});
    })
  } else if (endpoint.indexOf('/api/pizzahub/pizza/') >=0) {
    return new Promise((resolve, reject) => {
      resolve({pizzas: [{'type': 'veg', 'name': 'margherita', 'id': '123'}]});
    })
  } else if (endpoint.indexOf('/api/pizzahub/beverages') >=0) {
    return new Promise((resolve, reject) => {
      resolve({id: '10', 'type': 'veg', 'name': 'margherita', 'beverage': 'coke'});
    })
  } else if (endpoint === `/api/order`) {
    return new Promise((resolve, reject) => {
      resolve({'type': 'veg', 'name': 'margherita', 'beverage': 'coke'});
    })
  }
}

Il prossimo passo è il refactoring del nostro inferno di callback. A questo scopo, per prima cosa, creeremo alcune funzioni logiche:

// Restituisce shop id
let getShopId = result => result.shopId;

// Restituisce una promise con la liste delle pizze del ristorante
let getPizzaList = shopId => {
  const url = `/api/pizzahub/pizza/${shopId}`;
  return query(url);
}

// Restituisce una promise con la pizza che corrisponde alle richieste del cliente
let getMyPizza = (result, type, name) => {
  let pizzas = result.pizzas;
  let myPizza = pizzas.find((pizza) => {
    return (pizza.type===type && pizza.name===name);
  });
  const url = `/api/pizzahub/beverages/${myPizza.id}`;
  return query(url);
}

// Restituisce una promise dopo aver ordinato
let performOrder = result => {
  let beverage = result.id;
   return query(`/api/order`, {'type': result.type, 'name': result.name, 'beverage': result.beverage});
}

// Conferma l'ordine
let confirmOrder = result => {
    console.log(`Your order of ${result.type} ${result.name} with ${result.beverage} has been placed!`);
}

Usiamo queste funzioni per creare le promise necessarie. Questo è il codice che dovresti paragonare con l'esempio dell'inferno di callback. È molto più bello ed elegante.

function orderPizza(type, name) {
  query(`/api/pizzahub/`)
  .then(result => getShopId(result))
  .then(shopId => getPizzaList(shopId))
  .then(result => getMyPizza(result, type, name))
  .then(result => performOrder(result))
  .then(result => confirmOrder(result))
  .catch(function(error){
    console.log(`Bad luck, No Pizza for you today!`);
  })
}

E infine, chiamiamo il metodo orderPizza() passando il tipo e il nome della pizza, in questo modo:

orderPizza('veg', 'margherita');

Cosa viene dopo?

Se sei arrivato fin qui e hai letto la maggior parte di questo articolo, congratulazioni! Dovresti avere un'idea più chiara sulle promise in JavaScript. Puoi trovare tutti gli esempi usati nell'articolo in questo repository GitHub.

Il prossimo passo, dovrebbe essere apprendere le funzioni async in JavaScript che semplificano ulteriormente le cose. Il concetto delle promise in JavaScript si apprende meglio scrivendo dei piccoli esempi e lavorando su di essi.

A prescindere dal framework o dalla libreria che usiamo (Angular, React, Vue, ecc.), le operazioni asincrone sono inevitabili. Questo vuol dire che dobbiamo capire le promise per lavorare meglio.

Inoltre, sono sicuro che l'uso del metodo fetch ti risulterà più facile adesso:

fetch('/api/user.json')
.then(function(response) {
    return response.json();
})
.then(function(json) {
    console.log(json); // {"name": "tapas", "blog": "freeCodeCamp"}
});

• Il metodo fetch restituisce una promise. Quindi possiamo usare il metodo .then.
• Il resto riguarda la catena di promise che abbiamo imparato in questo articolo.

Prima di terminare...

Grazie per aver letto fin qui! Connettiamoci. Puoi taggarmi su Twitter (@tapasadhikary) in un commento.

Potresti trovare interessanti anche questi articoli:

• JavaScript undefined and null: Let's talk about it one last time!
• JavaScript: Equality comparison with ==, === and Object.is
• The JavaScript `this` Keyword + 5 Key Binding Rules Explained for JS Beginners
• JavaScript TypeOf – How to Check the Type of a Variable or Object in JS

È tutto per adesso. Ci vediamo presto con il mio prossimo articolo. Stammi bene.

Potresti aver visto o aver scritto alcune volte del codice come questo in JavaScript:

function sayWord(word) {
	return () => console.log(word);
}

const sayHello = sayWord("hello");

sayHello(); // "hello"

Questo codice è interessante per un paio di motivi. Primo, possiamo accedere a word nella funzione restituita da sayWord. Secondo, possiamo accedere al valore di word quando chiamiamo sayHello – anche se chiamiamo sayHello da dove normalmente non avremmo accesso a word.

In questo articolo, apprenderemo cosa sono lo scope (ambito di visibilità) e le closure (chiusure), che consentono questo tipo di comportamento.

Introduzione all'Ambito di Visibilità in JavaScript

L'ambito di visibilità è il primo pezzo che ci aiuterà a comprendere l'esempio precedente. L'ambito di visibilità di una variabile è la parte di un programma in cui la variabile è accessibile.

Le variabili in JavaScript hanno un ambito di visibilità lessicale, ossia possiamo determinare l'ambito di visibilità di una variabile in base a dove è dichiarata nel codice (ciò non è del tutto esatto: le variabili dichiarate con var non hanno un ambito di visibilità lessicale, ma ne riparleremo a breve).

Per esempio:

if (true) {
	const foo = "foo";
	console.log(foo); // "foo"
}

L'istruzione if introduce un ambito di blocco tramite una dichiarazione di blocco. Diciamo che foo ha un "ambito di visibilità di blocco" relativo all'istruzione if. Ciò significa che è accessibile solo dal codice dentro il blocco if.

Se provassimo ad accedere alla variabile foo dall'esterno di questo blocco, otterremmo un ReferenceError perché la variabile è fuori dall'attuale ambito di visibilità:

if (true) {
	const foo = "foo";
	console.log(foo); // "foo"
}

console.log(foo); // Uncaught ReferenceError: foo is not defined

Anche le altre istruzioni di blocco, come i loop for e while, creano un ambito di visibilità di blocco per le variabili. Per esempio, foo ha un ambito di visibilità limitato al corpo della funzione di seguito:

function sayFoo() {
	const foo = "foo";
	console.log(foo);
}

sayFoo(); // "foo"

console.log(foo); // Uncaught ReferenceError: foo is not defined

Ambito di Visibilità Annidato e Funzioni

JavaScript permette blocchi annidati e di conseguenza ambiti di visibilità annidati. Questi ultimi creano un albero o catena di ambiti di visibilità.

Consideriamo il seguente codice, che annida molteplici istruzioni di blocco:

if (true) {
	const foo = "foo";
	console.log(foo); // "foo"

	if (true) {
		const bar = "bar";
		console.log(foo); // "foo"

		if (true) {
			console.log(foo, bar); // "foo bar"
		}
	}
}

JavaScript ci permette anche di annidare le funzioni:

function foo(bar) {
	function baz() {
		console.log(bar);
	}

	baz();
}

foo("bar"); // "bar"

Come previsto, possiamo accedere alle variabili dall'ambito di visibilità in cui sono state dichiarate. Ma possiamo anche accedere alle variabili dall'ambito di visibilità interno (l'ambito di visibilità creato all'interno dell'ambito di visibilità della variabile stessa). Ovvero possiamo accedere a una variabile dall'ambito di visibilità in cui è stata dichiarata e da ogni ambito interno ad esso.

Prima di andare avanti è meglio chiarire come varia questo meccanismo in base a come dichiariamo una variabile.

Ambito di visibilità di let, const e var in JavaScript

Possiamo creare una variabile con una dichiarazione let, const e var. Per let e const, l'ambito di visibilità di blocco funziona come abbiamo appena spiegato. Mentre var funziona in maniera differente.

let e const

let e const creano variabili con ambito di blocco. Quando sono dichiarate all'interno di un blocco, sono accessibili solo dall'interno di quel blocco. Questo comportamento è stato mostrato nell'esempio precedente:

if (true) {
	const foo = "foo";
	console.log(foo); // "foo"
}

console.log(foo); // Uncaught ReferenceError: foo is not defined

var

L'ambito di visibilità di variabili create con var corrisponde al più vicino ambito di funzione o all'ambito globale (che discuteremo fra breve). Non hanno un ambito di visibilità di blocco:

function foo() {
	if (true) {
		var foo = "foo";
	}
	console.log(foo);
}

foo(); // "foo"

var può creare situazioni confuse, e la includo in questo articolo solo per completezza. Quando è possibile è meglio usare let e const. Per il resto dell'articolo useremo solo variabili dichiarate con let e const.

Se sei interessato a come funziona esattamente var nell'esempio precedente, puoi trovare maggiori informazioni nel mio articolo sull'hoisting.

Ambito di visibilità Globale e di Modulo in JavaScript

Oltre all'ambito di blocco, le variabili possono avere anche un ambito di visibilità globale o di modulo.

In un browser, l'ambito globale è il livello più alto dello script. È la radice dell'albero di cui abbiamo parlato prima. Quindi, creare una variabile nell'ambito globale la rende accessibile da qualsiasi altro ambito:

<script>
	const foo = "foo";
</script>
<script>
	console.log(foo); // "foo"
		
	function bar() {
		if (true) {
			console.log(foo);
		}
	}

	bar(); // "foo"
</script>

Ogni modulo invece ha il proprio ambito di visibilità. Le variabili dichiarate in un modulo sono accessibili solo da dentro quel modulo - non sono globali:

<script type="module">
	const foo = "foo";
</script>
<script>
	console.log(foo); // Uncaught ReferenceError: foo is not defined
</script>

Chiusure in JavaScript

Adesso che abbiamo capito come funziona l'ambito di visibilità, possiamo tornare all'esempio che abbiamo visto nell'introduzione:

function sayWord(word) {
	return () => console.log(word);
}

const sayHello = sayWord("hello");

sayHello(); // "hello"

Ricorda che c'erano due cose interessanti in questo esempio:

1. La funzione restituita da sayWord ha accesso al parametro word
2. La funzione restituita mantiene il valore di word quando sayHello è chiamata fuori dall'ambito di visibilità di word

Il primo punto può essere spiegato dall'ambito lessicale: la funzione ritornata può accedere a word perché esiste nel suo ambito esterno.

Il secondo punto si spiega con le chiusure: una chiusura è una funzione combinata con riferimenti a variabili definite fuori dalla funzione stessa. Le chiusure mantengono i riferimenti alla variabile, e questo permette loro di accedere alle variabili fuori dal loro ambito. "Racchiudono" la funzione e le variabili nel proprio ambiente.

Esempi di Chiusure in JavaScript

Probabilmente hai già incontrato e usato le chiusure senza neanche accorgertene. Vediamo alcuni altri modi per usarle.

Callback

Nelle funzioni callback è abituale far riferimento a una variabile dichiarata fuori dalla funzione stessa. Per esempio:

function getCarsByMake(make) {
	return cars.filter(x => x.make === make);
}

make è accessibile all'interno della funzione callback per via dell'ambito lessicale e il valore di make è preservato anche quando la funzione anonima è chiamata da filter grazie alla chiusura.

Memorizzazione dello stato

Possiamo usare le chiusure per restituire un oggetto che memorizzi lo stato da una funzione. Consideriamo la funzione makePerson qui di seguito, che restituisce un oggetto capace di memorizzare e cambiare il valore di name:

function makePerson(name) {
	let _name = name;

	return {
		setName: (newName) => (_name = newName),
		getName: () => _name,
	};
}

const me = makePerson("Zach");
console.log(me.getName()); // "Zach"

me.setName("Zach Snoek");
console.log(me.getName()); // "Zach Snoek"

Questo esempio dimostra che quando creiamo una chiusura il valore delle variabili fuori dal suo ambito non viene congelato. La chiusura mantiene il riferimento a queste variabili per tutto il suo ciclo di vita.

Metodi privati

Se sei pratico di programmazione orientata agli oggetti, avrai notato che l'ultimo esempio ricorda una classe che memorizza lo stato privato ed espone metodi pubblici getter e setter. Possiamo estendere questo parallelismo con la programmazione orientata agli oggetti usando le chiusure per implementare i metodi privati:

function makePerson(name) {
	let _name = name;

	function privateSetName(newName) {
		_name = newName;
	}

	return {
		setName: (newName) => privateSetName(newName),
		getName: () => _name,
	};
}

privateSetName non è accessibile direttamente e può accedere alla proprietà privata _name tramite una chiusura.

Gestori di Eventi in React

Infine, le chiusure sono usate abitualmente nei gestori di eventi in React. Il componente Counter qui di seguito è una variazione dalla documentazione di React:

function Counter({ initialCount }) {
	const [count, setCount] = React.useState(initialCount);

	return (
		<>
			<button onClick={() => setCount(initialCount)}>Reset</button>
			<button onClick={() => setCount((prevCount) => prevCount - 1)}>
				-
			</button>
			<button onClick={() => setCount((prevCount) => prevCount + 1)}>
				+
			</button>
			<button onClick={() => alert(count)}>Show count</button>
		</>
	);
}

function App() {
	return <Counter initialCount={0} />;
}

Le chiusure permettono:

• ai gestori dell'evento click dei bottoni reset, decrement e increment di accedere a setCount
• al bottone reset di accedere a initialCount dalle proprietà di Counter
• e al bottone “Show count” di visualizzare lo stato count.

Le Chiusure sono importanti anche in altre parti di React, come prop e hook. Questi temi non rientrano nell'ambito di questo articolo. Per saperne di più sul ruolo delle chiusure in React, raccomando la lettura di questo post di Kent C. Dodds o questo post di Dan Abramov.

Conclusione

L'ambito di visibilità è la parte di un programma da cui abbiamo accesso a una variabile. JavaScript ci permette di annidare gli ambiti di visibilità, e le variabili dichiarate in un ambito esterno sono accessibili da uno interno. Le variabili possono avere ambito di visibilità globale, di modulo o di blocco.

Una chiusura è una funzione che racchiude un riferimento a una variabile dichiarata in un ambito di visibilità esterno ad essa. Le chiusure permettono alle funzioni di mantenere una connessione con delle variabili esterne, anche fuori dall'ambito di visibilità delle variabili stesse.

Esistono molteplici usi per le chiusure, dalla creazione di strutture simili alle classi che memorizzano lo stato e implementano metodi privati, al passare funzioni callback ai gestori di eventi.

Connettiamoci

Se sei interessato ad altri articoli come questo, iscriviti alla mia newsletter e seguimi su LinkedIn e Twitter!

Ringraziamenti

Grazie a Bryan Smith per avermi dato dei feedback sulle bozze di questo post.

Foto di Karine Avetisyan su Unsplash.

Diciamo che stai lavorando alla tua nuova grande idea - una app web o mobile e un server back-end. Fin qui niente di complicato. Fino a che non ti rendi conto che hai bisogno di inviare dati dal tuo server ai client.

Normalmente, per cose del genere, la prima cosa che ti salta alla mente è di usare strumenti affidabili, come WebSockets, SocketIO, o addirittura un servizio a pagamento che se ne occupa al posto tuo.

Ma esiste un altro metodo che normalmente viene lasciato da parte, di cui potresti anche non averne mai sentito parlare finora. Si chiama SSE, abbreviazione di Server-Sent Events (Eventi Inviati dal Server).

SSE occupa un posto speciale nel mio cuore, grazie alla sua semplicità. È leggero, efficiente e molto potente.

Per spiegare in dettaglio SSE e come lo utilizzo, esaminerò un mio piccolo progetto parallelo che penso sia un eccellente esempio di SSE. Utilizzerò Typescript, Express e RxJS, quindi prepara il tuo ambiente di lavoro e allaccia le cinture perché stiamo per tuffarci nel codice.

Prima di iniziare, c'è una cosa che devi sapere su SSE. Come suggerisce il suo nome, Server-Sent Events è unidirezionale dal server al client. Se il tuo client avesse bisogno di inviare dati in risposta al server, SSE non è una soluzione adatta alle tue esigenze. Ma nella maggior parte degli scenari non è un requisito necessario e possiamo usare REST per inviare dati in risposta al server.

Qual è il progetto?

L'idea di questo progetto è semplice: ho un sacco di script che girano su Raspberry Pis, droplet su Digital Ocean e altri posti che non mi sono facilmente accessibili. Quindi ho bisogno di un modo per salvare i log e accedervi da qualsiasi parte.

La soluzione che cerco è una semplice app web che riceva i log e un collegamento diretto alla mia sessione che possa aprire su qualsiasi dispositivo o anche condividere con altre persone.

Ci sono un paio di cose da tenere a mente prima di andare avanti.

Primo, i log che ricevo dai miei script non sono molto frequenti, e la complicazione di usare HTTP è trascurabile nel mio caso specifico. Per questo, ho deciso di pubblicare i miei log in una API REST di base e usare SSE nel lato client per registrare i log in arrivo.

Secondo, questo strumento serve per un debug rapido di cose su cui sto lavorando. Esistono svariati strumenti professionali che potrei utilizzare. Ma volevo qualcosa di veramente leggero e facile da usare.

Scriviamo un po' di codice lato Server

La configurazione lato server è semplice. Quindi iniziamo con un diagramma per darti un'idea del setup prima di spiegare tutto più dettagliatamente.

Se pensiamo al nostro server back-end come a una pipeline, da un lato abbiamo una serie di publisher (editori) - nel nostro caso gli script che pubblicano i log. Dall'altro abbiamo i client che registrano questi log.

Per connettere questi due vertici, userò un Soggetto RxJS. Questo mi permetterà di pubblicare qualsiasi cosa dall'editore tramite REST e in seguito registrare questi eventi e girare i messaggi ai client tramite SSE.

Per iniziare, definiamo la nostra interfaccia Log. Per mantenere le cose semplici, definirò solo il campo content che conterrà le informazioni del log.

interface Log {
  content: string;
}

Come configurare RxJS

Importiamo RxJS, creiamo un nuovo Subject per i nostri Log e definiamo una funzione per pubblicare i log su questo Subject.

Ovviamente, potremmo esportare il nostro Subject e chiamarlo direttamente dal nostro router, ma io preferisco astrarre l'implementazione e fornire solamente la funzione emit al resto del mio codice.

import { Subject } from 'rxjs';

// Log Subject
const NewLog$ = new Subject<Log>();

/**
 * Emit a new log to the RxJS subject
 * @param log
 */
export function emitNewLog(log: Log): void {
    NewLog$.next(log);
}

E per finire, definiamo una nuova rotta nel server di Express che accetti i nuovi log dai nostri client e li pubblichi tramite il metodo emitNewLog che abbiamo appena creato.

app.post('/', (req: Request, res: Response) => {
  const content = req.body.content;
  const log: Log = { content: content };
  emitNewLog(log);
  return res.status(200).json({ ok: true });
});

Adesso siamo pronti con la parte riguardante la pubblicazione. Quello che rimane da fare è definire la rotta SSE, registrare il Subject RxJS e inviare i log ai nostri client.

Come configurare la rotta SSE

Iniziamo con la definizione di una nuova rotta per la nostra connessione SSE. Per abilitare SSE, abbiamo bisogno di inviare un paio di header ai client.

Vogliamo l'header ‘Connection’ impostato su ‘keep-alive’, ‘Cache-Control’ su ‘no-cache’ e ‘Content-Type’ su ‘text/event-stream’. In questa maniera il client saprà che questa è una rotta SSE.

Inoltre, ho aggiunto ‘Access-Control-Allow-Origin’ per CORS e ‘X-Accel-Buffering’ impostato su ‘no’ per evitare che Nginx si intrometta in questa rotta. E per finire possiamo reinviare gli header al nostro client per iniziare il flusso di eventi.

app.get('/', (req: Request, res: Response) => {
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Connection', 'keep-alive');
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('X-Accel-Buffering', 'no');
  res.flushHeaders();
});

Adesso possiamo iniziare a inviare dati inserendoli nella nostra risposta.

SSE utilizza un protocollo di testo che possiamo usare per aiutare il client a differenziare fra i vari tipi di eventi. Ognuno dei nostri eventi dovrebbe avere questa struttura:

event: ${event name}\n
data: ${event data}\n\n

Per facilitarmi la vita, ho creato una funzione che si occupa della serializzazione al posto mio.

/**
 * SSE message serializer
 * @param event: Event name
 * @param data: Event data
 */
function serializeEvent(event: string, data: any): string {
  const jsonString = JSON.stringify(data);
  return `event: ${event}\ndata: ${jsonString}\n\n`;
}

Ora possiamo registrare il Subject RxJS che abbiamo creato prima, serializzare ogni nuovo log e girarlo sulla nostra connessione come un evento NEW_LOG.

app.get('/', (req: Request, res: Response) => {
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Connection', 'keep-alive');
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('X-Accel-Buffering', 'no');
  res.flushHeaders();

  NewLog$.subscribe((log: Log) => {
    res.write(serializeEvent('NEW_LOG', log));
  });

}

Per ultimo dobbiamo assicurarci di cancellare la registrazione dell'osservatore quando la connessione SSE viene chiusa:

app.get('/', (req: Request, res: Response) => {
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Connection', 'keep-alive');
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('X-Accel-Buffering', 'no');
  res.flushHeaders();

  const stream$ = NewLog$.subscribe((log: Log) => {
    res.write(serializeEvent('NEW_LOG', log));
  });

  req.on('close', () => {
    stream$.unsubscribe();
  });
});

E questo è tutto! Abbiamo finito con il nostro server ed è ora di occuparci del codice front-end.

Scriviamo il codice del client

Registrare la rotta SSE dal browser è semplicissimo. Per prima cosa, spostiamoci sul codice del client e creiamo una nuova istanza dell'interfaccia EventSource e passiamo il nostro endpoint come argomento del constructor.

const eventSource = new EventSource("/");

Quindi, possiamo aggiungere gli event listeners per gli eventi che vogliamo registrare (nel nostro caso, NEW_LOG) e definiamo un metodo callback per gestire il nostro log.

eventSource.addEventListener(
   "NEW_LOG", (event) => {
       const log = JSON.parse(event.data);
       // use the data to update the UI
    }, false
);

E per finire,  possiamo chiudere la connessione appena abbiamo finito di osservare questi eventi.

eventSource.close();

Conclusione

Come puoi vedere, i Server-Sent Events rendono veramente facile inviare contenuto dal server verso il client. Sono particolarmente utili perché abbiamo un'interfaccia integrata nella maggior parte dei browser moderni, e possiamo facilmente usare un polyfill per quelli che non la forniscono.

Inoltre, SSE gestisce automaticamente le riconnessioni al posto nostro, nel caso in cui il client perdesse la connessione al server. Perciò, è una valida alternativa a SocketIO e WebSockets in vari scenari in cui si ha bisogno di un flusso di dati unidirezionale dal server.

Se sei interessato in questo progetto, ho aggiunto un paio di funzionalità extra al codice che abbiamo appena visto e un'interfaccia grafica che puoi vedere qui: LogSnag Console.

Cos'è l'optional chaining?

L'optional chaining (concatenamento opzionale), rappresentato da ?. in JavaScript, è una nuova funzionalità introdotta con ES2020.

L'optional chaining cambia la maniera in cui accedere alle proprietà in oggetti annidati in profondità. Risolve il problema di dover fare molteplici controlli per valori nulli quando si accede a una lunga catena di proprietà in JavaScript.

Stato attuale: stadio 4 del processo di approvazione ECMAScript: https://github.com/tc39/proposal-optional-chaining

Casi d'uso

1. Accedere alle proprietà di un oggetto con valore potenzialmente  null o undefined.
2. Ottenere risultati da una variabile che potrebbe non essere ancora disponibile.
3. Ottenere valori di default.
4. Accedere a lunghe catene di proprietà.

Immagina che come risposta di una API ti aspetti un oggetto di questo tipo:

obj = {
  prop1: {
    prop2: {
      someProp: "value"
    }
  }
};

Ma potresti non sapere in anticipo se ognuno di questi campi è disponibile. Alcuni potrebbe non essere inclusi nella risposta dell'API, o potrebbero contenere valori nulli.

Per esempio:

//risposta attesa
obj = {
  id: 9216,
  children: [
    { id: 123, children: null },
    { id: 124, children: [{ id: 1233, children: null }] }
  ]
};

//risposta ottenuta
obj = {
  id: 9216,
  children: null
};

Questo succede spesso con funzioni che accedono a una API. Forse ti è capitato di vedere del codice di React che cerca di salvaguardarsi da questo tipo di problema nella seguente maniera:

render = () => {
  const obj = {
    prop1: {
      prop2: {
        someProp: "value",
      },
    },
  };

  return (
    <div>
      {obj && obj.prop1 && obj.prop1.prop2 && obj.prop1.prop2.someProp && (
        <div>{obj.prop1.prop2.someProp}</div>
      )}
    </div>
  );
};

In passato, per prepararsi ad affrontare questo problema, abbiamo spesso usato Lodash, e più precisamente il metodo _.get:

_.get(obj, prop1.prop2.someProp);

Questo metodo ritorna undefined se una qualunque di quelle proprietà è undefined. L'optional chaining è esattamente questo! Adesso invece di usare una libreria esterna, questa funzionalità è integrata.

Come funziona l'optional chaining?

?. può essere usato per concatenare proprietà che potrebbero avere un valore null o undefined.

const propNeeded = obj?.prop1?.prop2?.someProp;

Se una qualsiasi di queste proprietà contenesse un valore null o undefined, JavaScript ritornerebbe undefined.

E se invece volessimo restituire qualcosa di significativo? Puoi provare così:

let alberoGenealogico = {
    noi: {
        figli: {}
    }
}


// con il metodo _.get
const nipoti = _.get(alberoGenealogico, 'noi.figli.loroFigli', 'non hanno avuto figli' );

//con optional chaining e null coalescing 
const nullCoalescing = alberoGenealogico?.noi?.figli?.loroFigli ?? 'non hanno avuto figli'
console.log(nullCoalescing) //non hanno avuto figli

Funziona anche con oggetti che potrebbero essere null o undefined:

let user;
console.log(user?.id) // undefined

Come ottenere questa nuova funzionalità

1. Provala nella console del tuo browser: essendo un'aggiunta recente, un browser risalente potrebbe necessitare di polyfill. Puoi provarlo nella console di browser come Chrome o Firefox. Se non funzionasse ancora, puoi provare ad abilitare le funzionalità sperimentali di JavaScript visitando chrome://flags/ e abilitando "Experimental JavaScript".
2. Puoi provarlo nella tua app di Node usando Babel:

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

Risorse

ttps://dmitripavlutin.com/javascript-optional-chaining/

1. Documentazione di Babel: https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining

TL;DR

Usa optional chaining ?. con oggetti o lunghe concatenazioni di proprietà che potrebbero contenere un valore null o undefined. La sintassi è la seguente:

let user = {};
console.log(user?.id?.name)