Callbacks en

Acerca de Callbacks

Las funciones callback son funciones que se pasan como argumentos a otras funciones. La función callback se puede invocar entonces para desencadenar una acción posterior. A menudo, las callbacks se usan para gestionar los resultados del trabajo realizado o para gestionar una acción cuando ocurre un evento. Las funciones callback pueden usarse tanto en programación síncrona como asíncrona.

const sideLength = 5;

// Caller function takes a callback function
function applySideLength(callback) {
  return callback(sideLength);
}

// Callback must expect the possible argument from the calling function
function areaOfSquare(side) {
  return side * side;
}

applySideLength(areaOfSquare); // => 25

También puedes escribir las callbacks como una expresión de función:

applySideLength(function squarePerimeter(side) {
  return side * 4;
});

Este es un patrón útil en JavaScript porque JavaScript está diseñado como un entorno de ejecución de un solo hilo en el que solo puede ejecutarse una llamada a función a la vez. Durante la ejecución, el entorno no puede responder a otros eventos ni continuar la ejecución hasta que la función haya devuelto.

Muchas llamadas a API (funciones de E/S, temporizadores y escuchadores de eventos) usan un mecanismo asíncrono para poner la llamada a función actual a un lado hasta que el trabajo haya terminado. Cuando el trabajo termina, se coloca una función callback en la cola de mensajes, de modo que, cuando el entorno se encuentra entre llamadas a funciones, los mensajes se procesan invocando la función callback.

También es útil usar funciones callback porque pueden hacer referencia a variables de su scope de cierre a las que no puede acceder la función desde la que se invocan más tarde.

Ejemplos concretos de funciones callback

Manejadores de eventos

Los manejadores de eventos son un caso de uso habitual de las callbacks en JavaScript. Los eventos del navegador como 'onload' o 'onclick' son señales que pueden desencadenar la invocación de funciones. El método addEventListener de un objeto del DOM [Document Object Model registra una función callback que se invoca cuando «oye» que ha ocurrido un evento.

document.addEventListener('onload', function () {
  alert('The webpage has now been loaded');
});

Convención de Node.js

En Node.js, las funciones callback siguen una convención para controlar el flujo de un programa. Siguen este patrón: el primer argumento de la función callback puede recibir un Error o null; el segundo argumento y los siguientes reciben los datos que la función que hace la llamada está diseñada para enviar.

Si ocurre un error, es posible que el segundo argumento y los siguientes no estén presentes, así que no puedes contar con que lo estén.

function operation(a, b, callback) {
  // Work ...

  if (/* an error occurs */) {
    return callback(new Error('An error occurred'))
  }

  // On success:
  callback(null, data)
}

function callback(error, returnedData) {
  if (error) {
    // An error occurred, handle it here.
    return
  }

  // No error occurred, continue with the returned data.
}

operation(1, 2, callback)

Verás este patrón a menudo cuando trabajes con funciones asíncronas como ayuda para el control del flujo.

Callbacks disfrazadas

Las funciones habituales de Array usan funciones callback para definir su comportamiento:

• Array.prototype.forEach:

  • Acepta una callback, que aplica la callback a cada elemento de un array.

    [1, 2, 3].forEach(function (element) {
      doSomething(element);
    });
    // => doSomething() is invoked 3 times, once with each element
    

• Array.prototype.map

  • Acepta una callback, que aplica la callback a cada elemento de un array y usa el resultado para crear un array nuevo.

    [1, 2, 3].map(function (element) {
      return element + 1;
    });
    // => [2, 3, 4]
    

• Array.prototype.reduce

  • Acepta una callback, que aplica la callback a cada elemento de un array y pasa el resultado a la siguiente invocación.

    [1, 2, 3].reduce(function (runningSum, element) {
      return runningSum + element;
    }, 0);
    // => 6