Callbacks en

Acerca de Callbacks

Las funciones callback son funciones que se pasan como argumentos a otras funciones. La función callback se puede entonces invocar para desencadenar una acción posterior. A menudo, los callbacks se usan para manejar los resultados del trabajo realizado, o para manejar una acción cuando ocurre un evento. Las funciones callback se pueden usar 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 los 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, donde solo se puede ejecutar una llamada a función a la vez. Durante la ejecución, el entorno no puede responder a otros eventos ni continuar hasta que la función haya terminado de ejecutarse.

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 esté completo. Al completarse, una función callback se coloca en la cola de mensajes para que, cuando el entorno esté entre llamadas a funciones, los mensajes se procesen invocando la función callback.

También es útil usar funciones callback porque pueden hacer referencia a variables en el ámbito de su clausura, que no están disponibles para la función donde luego se invocan.

Ejemplos específicos de funciones callback

Manejadores de eventos

Los manejadores de eventos son un caso de uso común para los 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 [Modelo de Objetos del Documento registra una función callback para que se invoque cuando «escucha» 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 llama 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 depender de 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 para ayudar con el control de flujo.

Callbacks disfrazados

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

• Array.prototype.forEach:

  • Acepta un callback, que aplica el 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 un callback, que aplica el callback a cada elemento de un array usando el resultado para crear un nuevo array.

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

• Array.prototype.reduce

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

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