Funciones de devolución de llamada de JavaScript Cómo hacerlo, con ejemplos

Este artículo explicará las funciones de devolución de llamada en JavaScript:qué son, por qué se usan y cómo usarlas.

¿Qué es una devolución de llamada en el lenguaje de programación JavaScript?

Una función de devolución de llamada es una función que se pasa como parámetro a otra función para que se ejecute dentro de la segunda función.

¿Para qué son útiles las devoluciones de llamada?

Las funciones de devolución de llamada generalmente se usan para ejecutar una función cuando se ha completado otra. Esto permite una fácil reutilización del código.

Una sola función que acepta una devolución de llamada se puede usar varias veces para diferentes tareas pasando una devolución de llamada diferente.

Por ejemplo , es posible que tenga una función que procese un número llamado processNumber() . Debe ejecutar una de dos funciones dependiendo de si el número que se procesa es par o impar. Esas funciones se pueden proporcionar como funciones de devolución de llamada a processNumber() y ejecutado desde dentro, en lugar de duplicar su código.

Funciones de devolución de llamada se usan comúnmente para encadenar funciones juntas para que una se complete después de la otra. Por lo tanto, generalmente se supone que una función de devolución de llamada siempre se ejecuta cuando una función ha completado todas las demás tareas.

¿Dónde se utilizan las funciones de devolución de llamada?

Las funciones de devolución de llamada se utilizan en funciones de JavaScript integradas, así como en muchas bibliotecas disponibles en línea. También puede escribir sus propias funciones para aceptar devoluciones de llamadas.

Son una herramienta útil y vale la pena conocerlos.

Ejemplo

A continuación, ilustraré el ejemplo utilizado anteriormente:al pasar varias devoluciones de llamada a una función para eliminar la duplicación de código y permitir el encadenamiento de funciones.

// Define a function to process even numbers, to be called from the processNumber() function
function processEvenNumber(num){
    console.log("Number " + num + " is even!");
}

// Define a function to process odd numbers, to be called from the processNumber() function
function processOddNumber(num){
    console.log("Number " + num + " is odd!");   
}

// Define the function which will call either of the two above functions as callbacks
function processNumber(num, oddCallbackFunction, evenCallbackFunction){

    console.log("Processing number!");

    // Decide if num is odd or even using the % operator to get the remainder when num is divided by 2 - if the remainder is 0, it is even
    if(num % 2 == 0){
        // The callback function should be called using the name it is given as a parameter (evenCallbackFunction in this case) NOT the name the function was given when it was defined (processEvenNumber)
        evenCallbackFunction(num);
    } else {
        oddCallbackFunction(num);
    }

}

// Define an array (list) of numbers to test with
var testNumbers = [3, 6, 7, 9, 1, 2];

// Loop through testNumbers and run processNumber() on each of the numbers
testNumbers.forEach(function(num){

    // run processNumber() on each number in the testNumbers array
    processNumber(num, processOddNumber, processEvenNumber)

});

Entonces, ¿qué está pasando aquí?

En primer lugar, se definen dos funciones:procesamiento de números pares e impares (processEvenNumberprocesarNúmeroImpar ). Cada uno acepta un solo parámetro (el número) y lo imprime junto con un poco de texto sobre si se consideró par o impar. Estas dos funciones se utilizarán como funciones de devolución de llamada más tarde .

El número de proceso Luego se define la función. Acepta 3 parámetros:el número a procesar, así como dos funciones de devolución de llamada . Verificará si un número es par/impar y luego llamará a la función de devolución de llamada correspondiente por el nombre que se le dio como parámetro.

A paraCada() loop se usa para recorrer una serie de números de prueba.

Se han utilizado dos devoluciones de llamada para este ejemplo:puede usar tantas o tantas devoluciones de llamada como desee.

Este ejemplo realmente no ilustra una reducción en el código como se usa para demostrar las funciones cortas; sin embargo, es fácil ver que si las funciones fueran más largas, habría una reducción significativa en la cantidad de código escrito.

¿Sigo confundido? Puede obtener más información sobre las funciones de devolución de llamada de JavaScript aquí.