Funzioni di callback JavaScript: cosa sono i callback in JS e come usarli

Se hai familiarità 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 i callback, diventerai molto meglio in JavaScript.

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

Cos'è una funzione di richiamata?

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? Lasciatemelo mostrare in un esempio qui sotto:

function print(callback) { callback(); }

La funzione print () prende un'altra funzione come parametro e la chiama al suo 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 la versione video delle funzioni di richiamata di seguito:

Perché abbiamo bisogno delle funzioni di richiamata?

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

I callback assicurano che una funzione non verrà eseguita prima del completamento di un'attività, ma 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 richiamata

Per capire cosa ho spiegato sopra, cominciamo con un semplice esempio. Vogliamo registrare un messaggio sulla console ma dovrebbe essere lì dopo 3 secondi.

const message = function() { console.log("This message is shown after 3 seconds"); } 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 "messaggio" viene chiamata dopo che sono trascorsi 3 secondi. (1 secondo = 1000 millisecondi)

In altre parole, la funzione messaggio viene chiamata dopo che è successo qualcosa (dopo 3 secondi trascorsi per questo esempio), ma non prima. Quindi la funzione messaggio è un esempio di una funzione di callback.

Cos'è una funzione anonima?

In alternativa, possiamo definire una funzione direttamente all'interno di un'altra funzione, invece di chiamarla. Sarà simile a questo:

setTimeout(function() { console.log("This message is shown after 3 seconds"); }, 3000);

Come possiamo vedere, la funzione di callback qui non ha nome e una definizione di funzione senza un nome in JavaScript è chiamata come una "funzione anonima". Questo fa esattamente la stessa operazione dell'esempio sopra.

Richiamata come funzione freccia

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

setTimeout(() => { console.log("This message is shown after 3 seconds"); }, 3000);

E gli eventi?

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

Click here

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

document.queryselector("#callback-btn") .addEventListener("click", function() { console.log("User has clicked on the button!"); });

Quindi qui selezioniamo prima il pulsante con il suo id, quindi aggiungiamo un listener di eventi con il metodo addEventListener. Richiede 2 parametri. Il primo è il suo tipo, "clic", e il secondo parametro è una funzione di callback, che registra 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.

Incartare

I callback sono usati spesso in JavaScript e spero che questo post ti aiuti a capire cosa fanno effettivamente e come lavorarci più facilmente. Successivamente, puoi conoscere le Promesse JavaScript che è 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!