Funciones de retrollamada de JavaScript – ¿Qué son las devoluciones de llamada en JS y cómo usarlas?

Si estás familiarizado con la programación, ya sabes qué funciones hacen y cómo usarlas. Pero, ¿qué es una función de retrollamada (callback)? Las funciones retrollamada son una parte importante de JavaScript y una vez que entiendas cómo funcionan las retrollamadas, serás mucho mejor en JavaScript.

Entonces, en esta publicación, me gustaría ayudarte a comprender qué son las funciones retrollamada y cómo usarlas en JavaScript revisando algunos ejemplos.

Qué es una función Retrollamada?

En JavaScript, las funciones son objetos. Podemos pasar objetos a funciones como parámetros? Sí.

Por lo tanto, también podemos pasar funciones como parámetros a otras funciones y llamarlas dentro de las funciones externas. Suena complicado? Permítanme mostrar eso en un ejemplo a continuación:

function print(callback) {  
    callback();
}

La función print( ) toma otra función como parámetro y la llama dentro. Esto es válido en JavaScript y lo llamamos una "retrollamada (callback)". Entonces, una función que se pasa a otra función como parámetro es una función retrollamada. Pero eso no es todo.

También puede ver la versión en video de las funciones de retrollamada a continuación:

¿Por qué necesitamos funciones de retrollamada?

JavaScript ejecuta el código secuencialmente en orden de arriba hacia abajo. Sin embargo, hay algunos casos en que el código se ejecuta (o debe ejecutarse) después de que ocurra algo más y tampoco secuencialmente. Esto se llama programación asíncrona.

Las retrollamadas aseguran que una función no se va a ejecutar antes de que se complete una tarea, sino que se ejecutará justo después de que se haya completado la tarea. Nos ayuda a desarrollar código JavaScript asíncrono y nos mantiene a salvo de problemas y errores.

En JavaScript, la forma de crear una función de retrollamada es pasarla como un parámetro a otra función, y luego volver a llamarla justo después de que algo haya sucedido o se complete alguna tarea. Vamos a ver cómo…

Cómo crear una retrollamada

Para entender lo que he explicado anteriormente, permítame comenzar con un ejemplo sencillo. Queremos registrar un mensaje en la consola, pero debería estar allí después de 3 segundos.

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

Hay un método incorporado en JavaScript llamado "setTimeout", que llama a una función o evalúa una expresión después de un período de tiempo determinado (en milisegundos). Así que aquí, la función de "mensaje" se está llamando después de que 3 segundos hayan pasado. (1 segundo = 1000 milisegundos)

En otras palabras, se llama a la función de mensaje después de que sucedió algo (después de que 3 segundos pasaron para este ejemplo), pero no antes. Entonces la función de mensaje es un ejemplo de una función de retrollamada.

Qué es una función anónima?

Alternativamente, podemos definir una función directamente dentro de otra función, en lugar de llamarla. Se verá así:

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

Como podemos ver, la función de retrollamada aquí no tiene nombre y una definición de función sin un nombre en JavaScript se llama "función anónima". Esto hace exactamente la misma tarea que el ejemplo anterior.

Retrollamada como una función de flecha

Si lo prefieres, también puedes escribir la misma función de retrollamada en forma de función de flecha ES6, que es un nuevo tipo de función en JavaScript:

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

¿Qué pasa con los eventos?

JavaScript es un lenguaje de programación basado en eventos. También usamos funciones de retrollamada para declaraciones de eventos. Por ejemplo, digamos que queremos que los usuarios hagan clic en un botón:

<button id="callback-btn">Click here</button>

Esta vez veremos un mensaje en la consola solo cuando el usuario haga clic en el botón:

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

Así que aquí seleccionamos el botón primero con su id, y luego agregamos un detector de eventos con el método addEventListener. Se necesitan 2 parámetros. El primero es su tipo, "click", y el segundo parámetro es una función de retrollamada, que registra el mensaje cuando se hace clic en el botón.

Como puedes ver, las funciones de retrollamada también se usan para declaraciones de eventos en JavaScript.

Wrap up

Las retrollamadas se usan a menudo en JavaScript, y espero que esta publicación te ayude a comprender lo que realmente hacen y cómo trabajar con ellas más fácilmente. A continuación, puedes aprender sobre Promesas en JavaScript, que es un tema similar al que he explicado en mi nueva publicación.

Si desea obtener más información sobre el desarrollo web, no dudes en seguirme en Youtube!

Gracias por leer!

Traducido del artículo de Cem Eygi - JavaScript Callback Function - What are Callbacks in JS and How to Use Them.