Funciones callback y HOF

Callbacks y funciones de orden superior


Ahora que conocemos las funciones anónimas, podemos comprender más fácilmente lo que son los callbacks (también llamadas funciones callback o retrollamadas) y como utilizarlos.

¿Qué es una función callback?

A grandes rasgos, un callback (llamada hacia atrás) es pasar una función por parámetro a otra función, de modo que esta última función puede ejecutar la función pasada por parámetro de forma genérica desde su propio código, y nosotros podemos definirlas desde fuera de dicha función.

Esto se ve mucho más claramente con algo de código, así que observa el siguiente ejemplo:

const action = function () {
  console.log("Acción ejecutada.");
};

const mainFunction = function (callback) {
  callback();
};

mainFunction(action);
  • 1️⃣ Definimos una función action que realiza una tarea.
  • 2️⃣ Definimos una función mainFunction, que recibe como parámetro una función callback genérica, que no sabemos que hace exactamente.
  • 3️⃣ Llamamos a mainFunction, pasándole como parámetro la función concreta, que en nuestro caso es action.

¿Qué es una función «HOF»?

Las funciones de orden superior o HOF (High Order Functions) son funciones que reciben por parámetro otra función y/o devuelven una función mediante el return.

Lo aprendido en el ejemplo que vimos en el apartado anterior nos podría permitir crear varias funciones HOF y reutilizarlas posteriormente con diferentes propósitos. De hecho, esta es una primera aproximación para controlar la asincronía en Javascript, un tema que veremos más adelante, cuando dominemos mejor Javascript.

Observa el siguiente ejemplo, en el que estamos creando un número decimal aleatorio entre 0 y 1. Hemos definido que al ejecutar doTask, exista un 50% de probabilidad de que ocurra un error (valores entre 0 y 0.5), o no ocurra error (valores entre 0.5 y 1):

const action = function () {
  console.log("Acción ejecutada.");
};

const error = function () {
  console.error("Ha ocurrido un error");
};

const doTask = function (callback, callbackError) {
  const isError = Math.random() < 0.5;

  if (!isError) callback();
  else callbackError();
};

doTask(action, error);

Viendo este ejemplo, podemos planear ejecutar la función doTask(), que es nuestra HOF, cambiando los callbacks según nos interese, sin necesidad de crear funciones con el mismo código repetido una y otra vez.

Además, en el caso de que las funciones callbacks sean muy cortas, muchas veces utilizamos directamente la función anónima, sin necesidad de guardarla en una variable previamente:

const doTask = function (callback, callbackError) {
  const isError = Math.random() < 0.5;

  if (!isError) callback();
  else callbackError();
};

doTask(function () {
    console.log("Acción ejecutada.");
  },
  function () {
    console.error("Ha ocurrido un error");
  }
);

Como se puede ver, esta forma de escribir código se suele evitar para facilitar la legibilidad del código, y sólo se utiliza en casos muy específicos donde estás seguro que no hace falta guardar las funciones previamente.

Más adelante, hablaremos de los callbacks para gestionar asincronía. Esto no es más que una forma de utilizar los callbacks para controlar cuando se ejecuta una función. En ese momento también hablaremos de otro tipo de funciones: las funciones asíncronas.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev