Funciones de devolución de llamada de JavaScript: qué son las devoluciones de llamada en JS y cómo usarlas

Si está familiarizado con la programación, ya sabe qué funciones hacen y cómo usarlas. Pero, ¿qué es una función de devolución de llamada? Las funciones de devolución de llamada son una parte importante de JavaScript y una vez que comprenda cómo funcionan las devoluciones de llamada, mejorará mucho en JavaScript.

Entonces, en esta publicación, me gustaría ayudarlo a comprender qué son las funciones de devolución de llamada y cómo usarlas en JavaScript mediante algunos ejemplos.

¿Qué es una función de devolución de llamada?

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

Entonces, también podemos pasar funciones como parámetros a otras funciones y llamarlas dentro de las funciones externas. ¿Suena complicado? Déjame mostrarte 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 "devolución de llamada". Entonces, una función que se pasa a otra función como parámetro es una función de devolución de llamada. Pero eso no es todo.

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

¿Por qué necesitamos funciones de devolución de llamada?

JavaScript ejecuta código secuencialmente en orden descendente. Sin embargo, hay algunos casos en los que el código se ejecuta (o debe ejecutarse) después de que suceda algo más y tampoco de forma secuencial. A esto se le llama programación asincrónica.

Las devoluciones de llamada aseguran que una función no se ejecutará antes de que se complete una tarea, sino que se ejecutará inmediatamente después de que se complete la tarea. Nos ayuda a desarrollar código JavaScript asincrónico y nos mantiene a salvo de problemas y errores.

En JavaScript, la forma de crear una función de devolución de llamada es pasarla como parámetro a otra función y luego volver a llamarla justo después de que algo haya sucedido o se haya completado alguna tarea. Veamos cómo ...

Cómo crear una devolución de llamada

Para comprender lo que he explicado anteriormente, permítanme comenzar con un ejemplo simple. 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). Entonces, aquí, la función "mensaje" se llama después de que hayan pasado 3 segundos. (1 segundo = 1000 milisegundos)

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

¿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 devolución de llamada aquí no tiene nombre y una definición de función sin un nombre en JavaScript se llama como una "función anónima". Esto hace exactamente la misma tarea que en el ejemplo anterior.

Devolución de llamada como función de flecha

Si lo prefiere, también puede escribir la misma función de devolución de llamada que una función de flecha ES6, que es un tipo más nuevo de función en JavaScript:

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

¿Y los eventos?

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

Click here

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!"); });

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

Como puede ver, las funciones de devolución de llamada también se utilizan para declaraciones de eventos en JavaScript.

Envolver

Las devoluciones de llamada 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, puede aprender sobre JavaScript Promises, que es un tema similar al que expliqué en mi nueva publicación.

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

¡Gracias por leer!