Funzioni di callback in JavaScript: cosa sono le callback in JS e come usarle

Articolo originale: https://www.freecodecamp.org/news/javascript-callback-functions-what-are-callbacks-in-js-and-how-to-use-them/

Se hai dimestichezza con la programmazione, sai già cosa fanno le funzioni e come usarle. Ma cos'è una funzione di callback? Le funzioni di callback sono una parte importante di JavaScript e una volta compreso come funzionano, migliorerai di molto la comprensione di JavaScript.

Quindi, in questo post, ti aiuterò a capire cosa sono le funzioni di callback e come usarle in JavaScript passando attraverso alcuni esempi.

Che cos'è una Funzione di Callback?

In JavaScript, le funzioni sono oggetti. Possiamo passare oggetti a funzioni come parametri? Sì.

Quindi, possiamo anche passare funzioni come parametri ad altre funzioni e chiamarle all'interno delle funzioni esterne. Sembra complicato? Lascia che lo mostri in un esempio qui sotto:

function print(callback) {  
    callback();
}

La funzione print() prende un'altra funzione come parametro e la chiama all'interno. Questo è valido in JavaScript e lo chiamiamo "callback". Quindi una funzione che viene passata a un'altra funzione come parametro è una funzione di callback. Ma non è tutto.

Puoi anche guardare qui sotto la versione video delle funzioni di callback :

Perché abbiamo bisogno delle funzioni di Callback?

JavaScript esegue il codice in sequenza, nell'ordine dall'alto verso il basso. Tuttavia, ci sono alcuni casi in cui il codice viene eseguito (o deve essere eseguito) dopo che è successo qualcos'altro e anche non in sequenza. Questa è chiamata programmazione asincrona.

I callback assicurano che una funzione non verrà eseguita prima del completamento di un'attività ma, invece, verrà eseguita subito dopo il completamento dell'attività. Ci aiuta a sviluppare codice JavaScript asincrono e ci protegge da problemi ed errori.

In JavaScript, il modo per creare una funzione di callback è passarla come parametro a un'altra funzione e quindi richiamarla subito dopo che è successo qualcosa o che un'attività è stata completata. Vediamo come...

Come creare una Callback

Per capire cosa ho detto sopra, vorrei iniziare con un semplice esempio. Vogliamo stampare un messaggio sulla console ma dovrebbe essere fatto dopo 3 secondi.

const message = function() {  
    console.log("Questo messaggio viene visualizzato dopo 3 secondi");
}
 
setTimeout(message, 3000);

Esiste un metodo integrato in JavaScript chiamato "setTimeout", che chiama una funzione o valuta un'espressione dopo un determinato periodo di tempo (in millisecondi). Quindi qui, la funzione "message" viene chiamata dopo che sono trascorsi 3 secondi. (1 secondo = 1000 millisecondi)

In altre parole, la funzione message viene chiamata dopo che è successo qualcosa (in questo caso dopo 3 secondi), ma non prima. Quindi la funzione message è un esempio di funzione di callback.

Che cos'è una funzione anonima?

In alternativa, possiamo definire una funzione direttamente all'interno di un'altra funzione, invece di chiamarla. Sarà qualcosa del genere:

setTimeout(function() {  
    console.log("Questo messaggio viene visualizzato dopo 3 secondi");
}, 3000);

Come possiamo vedere, la funzione di callback qui non ha nome e una definizione di funzione senza nome in JavaScript, è chiamata "funzione anonima". Questa esegue esattamente lo stesso compito dell'esempio di prima.

Callback con una Arrow Function

Se preferisci, puoi anche scrivere la stessa funzione di callback come una funzione freccia di ES6, che è un tipo di funzione più recente in JavaScript:

setTimeout(() => { 
    console.log("Questo messaggio viene visualizzato dopo 3 secondi");
}, 3000);

E gli eventi?

JavaScript è un linguaggio di programmazione basato sugli eventi. Usiamo anche funzioni di callback per le dichiarazioni di eventi. Ad esempio, supponiamo di volere che gli utenti facciano clic su un pulsante:

<button id="callback-btn">Clicca qui</button>

Questa volta vedremo il messaggio sulla console solo quando l'utente clicca sul pulsante:

document.queryselector("#callback-btn")
    .addEventListener("click", function() {    
      console.log("L'utente ha cliccato sul pulsante!");
});

Quindi qui selezioniamo prima il pulsante con il suo id, poi aggiungiamo un listener di eventi con il metodo addEventListener. Occorrono 2 parametri. Il primo è il suo tipo, "click", e il secondo parametro è una funzione di callback, che stampa il messaggio quando si fa clic sul pulsante.

Come puoi vedere, le funzioni di callback vengono utilizzate anche per le dichiarazioni di eventi in JavaScript.

Concludendo

Le callback sono usate spesso  in JavaScript e spero che questo post ti aiuti a capire cosa fanno effettivamente e come lavorarci più facilmente. Successivamente, puoi esplorare JavaScript Promises , un argomento simile che ho spiegato nel mio nuovo post.

Se vuoi saperne di più sullo sviluppo web, sentiti libero di seguirmi su Youtube !

Grazie per aver letto!