Esercizio 15: JS

Sincroni e asincronia

In JS, ogni operazione viene eseguita subito dopo la precedente, passo dopo passo.

Possiamo però bypassare questo sistema con metodi asincroni.

function printNumbersSync() {
for (let i = 1; i <= 5; i++) {
    setTimeout(() => {
    console.log(i);
    }, i * 1000);
}
}

function printNumbersAsync() {
setTimeout(() => {
    console.log(1);
    for (let i = 2; i <= 5; i++) {
    console.log(i);
    }
}, 1000);
}

Nel caso di timeout, attese, caricamenti da altre fonti, abbiamo bisogno di attendere un certo risultato prima di partire col successivo.

Le promesse in JavaScript sono oggetti che rappresentano il completamento (o il fallimento) di un'operazione asincrona e consentono di gestire il risultato dell'operazione quando diventa disponibile. In pratica, quando si effettua una chiamata asincrona a una funzione o a un'API, non si sa quando la risposta sarà pronta. Invece di bloccare l'esecuzione del codice fino a quando la risposta non arriva, si può restituire un oggetto promessa che rappresenta il risultato futuro dell'operazione. Quando la risposta è disponibile, la promessa si risolve con un valore di successo, oppure viene rifiutata con un valore di errore. Per esempio, si può utilizzare una promessa per eseguire una chiamata AJAX per ottenere i dati da un server:

const promise = fetch('https://jsonplaceholder.typicode.com/todos/1');
    promise
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error(error));

In questo esempio, fetch restituisce una promessa che rappresenta il completamento dell'operazione di chiamata AJAX. La promessa viene quindi gestita con i metodi then e catch. Il metodo then viene chiamato quando la promessa si risolve con successo, e il metodo catch viene chiamato quando la promessa viene rifiutata.

L'oggetto Promise è un costruttore di oggetti utilizzato per rappresentare una "promessa" (o "promise" in inglese) di completamento di un'operazione asincrona. Un oggetto promessa rappresenta un'operazione che è in corso, ma la cui esecuzione potrebbe richiedere del tempo e/o potrebbe essere soggetta a errori.

L'oggetto Promise ha due stati: "pending" (in attesa) e "settled" (risolto). Quando una promessa viene creata, è inizialmente nello stato "pending". Quando l'operazione asincrona rappresentata dalla promessa viene completata con successo, la promessa passa allo stato "settled" con lo stato "fulfilled" e restituisce il risultato dell'operazione. Se invece l'operazione asincrona fallisce, la promessa passa allo stato "settled" con lo stato "rejected" e restituisce il motivo del fallimento dell'operazione.

Un oggetto Promise viene creato utilizzando il costruttore Promise, che accetta come argomento una funzione di "risoluzione" (o "resolver" in inglese) che viene eseguita quando l'operazione asincrona rappresentata dalla promessa viene completata. La funzione di risoluzione a sua volta accetta due funzioni di callback come parametri: una per risolvere la promessa (resolve) e l'altra per rifiutare la promessa (reject).

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      const randomNumber = Math.floor(Math.random() * 10);
      if (randomNumber < 5) {
        resolve(randomNumber);
      } else {
        reject("The random number is greater than or equal to 5.");
      }
    }, 1000);
  });

In questo esempio, viene creata una promessa che rappresenta il completamento di un'operazione che ritorna un numero casuale dopo un secondo. La funzione di risoluzione utilizza il metodo resolve per restituire il valore del numero casuale se il numero è inferiore a 5. Altrimenti, utilizza il metodo reject per rifiutare la promessa e restituire un messaggio di errore. La promessa può poi essere gestita con i metodi then e catch. Il metodo then viene chiamato quando la promessa si risolve con successo, e il metodo catch viene chiamato quando la promessa viene rifiutata. Ad esempio:

promise
    .then(result => console.log(`The random number is ${result}.`))
    .catch(error => console.error(error));

Testa questo esempio sulla console:

function delay(milliseconds) {
    return new Promise(function(resolve) {
      setTimeout(resolve, milliseconds);
    });
  }
  
  function print(text) {
    console.log(text);
  }
  
  delay(1000)
    .then(function() {
      print("Hello, World!");
    })
    .catch(function(error) {
      console.error(error);
    });
  

for loop vs forEach()

In JavaScript, sia forEach() che i cicli for standard possono essere utilizzati per iterare sugli array. Tuttavia, presentano alcune differenze nel loro comportamento e nella sintassi. Ecco alcune delle differenze chiave tra forEach() e i cicli for standard:

1. forEach() è un metodo nel prototipo dell'array, mentre i cicli for sono una costruzione del linguaggio.
2. forEach() è tipicamente utilizzato quando si desidera eseguire un'azione su ogni elemento di un array, mentre i cicli for sono spesso utilizzati quando è necessario un maggiore controllo sul processo di iterazione.
3. forEach() richiede una funzione di callback come argomento, mentre i cicli for utilizzano una variabile di indice per accedere a ciascun elemento dell'array.
4. forEach() è più veloce quando si itera su tutto un array con operazioni semplici;

const people = [
    { name: "John", age: 30 },
    { name: "Jane", age: 25 },
    { name: "Bob", age: 40 },
    { name: "Alice", age: 35 },
    { name: "David", age: 28 }
  ];
  
  function averageNameLength(people) {
    let sum = 0;
    const startTime = performance.now();
  
//    people.forEach(person => {
//      sum += person.name.length;
//    });
  people.forEach(function(person) {
    sum += person.name.length;
  });

    const endTime = performance.now();
    const timeTaken = (endTime - startTime).toFixed(2);

    console.log(`Time taken using forEach: ${timeTaken}ms`);

    return sum / people.length;
  }
  
  console.log(averageNameLength(people));
  

const people = [
    { name: "John", age: 30 },
    { name: "Jane", age: 25 },
    { name: "Bob", age: 40 },
    { name: "Alice", age: 35 },
    { name: "David", age: 28 }
  ];
  
  function averageNameLength(people) {
    let sum = 0;
    const startTime = performance.now();
  
    for (let i = 0; i < people.length; i++) {
      sum += people[i].name.length;
    }
  
    const endTime = performance.now();

    const timeTaken = (endTime - startTime).toFixed(2);

    console.log(`Time taken using forEach: ${timeTaken}ms`);

    
    return sum / people.length;
  }
  
  console.log(averageNameLength(people));