Funciones callback en JavaScript

Una función callback es aquella que se pasa como argumento a otra función.

Un callback sencillo sin función anónima

Vamos a crear una función callback en JavaScript. Este es un caso sencillo que no usa una función anónima. Tenemos tres partes.

1. La llamada o invocación a la función principal. Usamos como parámetro una llamada a la función callback
2. Se ejecuta la función principal. Esta función ejecutará su código, en nuestro caso lo primero que hace es darnos los 'Buenos días' y al final del código de esta función se encuentra una llamada a la función callback.
3. En último lugar se ejecuta la función callback que en este caso nos pregunta si queremos un cafe.

https://repl.it/@valoro/JS-funciones-CALLBACK1

 main(cafe);  
 function main(callback){  
  alert('1º Buenos días');  
  callback();  
 }  
 function cafe(){  
  alert('2º ¿Quieres un cafe?');  
 }  

Primero salta el primer alert que nos da los 'Buenos días'.

Luego salta el segundo alert que nos pregunta si queremos un café.

El callback sencillo con función anónima

Habitualmente la función de callback, en nuestro ejemplo la función cafe no suele ser una función con nombre sino una función anónima. En este caso el código quedaría así.

https://repl.it/@valoro/JS-funciones-CALLBACK2

 main(function(){  
  alert('2º ¿Quieres un cafe?');  
 });  
 function main(callback){  
  alert('1º Buenos días');  
  callback();  
 }  

El resultado obtenido es idéntico al del caso anterior. Primero nos desean buenos días y luego nos preguntan si queremos un café.

En el caso anterior dijimos que teníamos tres partes, pero en este caso tenemos solo dos.

1. Invocamos la función main y la pasamos como parámetro la función anónima
2. Se ejecuta la función main que lo primero que hace es darnos los buenos días y dentro de ella se invoca la función callback que es la función anónima que hemos recibido como parámetro. Esta función callback es la que nos preguntará si deseamos un café.

Función callback con un parámetro y sin función anónima

Vamos a pasar un parámetro a la función callback.

https://repl.it/@valoro/JS-funciones-CALLBACK3

Todo comienza con la invocación de la función main a la que pasamos como parámetro la función saluda. Lo primero que se ejecuta es la función main, dentro de ella se declara la función nombre preguntando al usuario. Y concluye el código dentro de main invocando a la función de callback que es saluda. Sabemos que la función de callback es saluda porque se la hemos pasado como parámetro. Finalmente se ejecuta la función saluda que recibe como parámetro la variable nombre. Dentro de ella se dispara un alert que nos dice hola.

 function main(callback){  
  var nombre=prompt('Dime tu nombre: ');  
  callback(nombre);  
 }  
 function saluda(nombre){  
  alert('Hola '+nombre);  
 }  
 main(saluda);  

Función callback con un parámetro y con función anónima

Modifiquemos el ejemplo anteriormente visto convirtiendo la función callback en una función anónima.

https://repl.it/@valoro/JS-funciones-CALLBACK4

 function main(callback){  
  var nombre=prompt('Dime tu nombre: ');  
  callback(nombre);  
 }  
 main(function (nombre){  
  alert('Hola '+nombre);  
 });  

Función principal con parámetros y sin función anónima

Deseamos crear un procedimiento por el que al pasarle los punto obtenidos los dos ejercicios de un examen nos diga si hemos superado la prueba. En este ejemplo, la puntuación de los dos ejercicios es de 2 y 3. El procedimiento sumará los puntos obtenidos en cada ejercicio y si la calificación final es mayor o igual a 5 nos dirá que hemos superado la prueba y en caso contrario nos dirá que lo intentemos de nuevo.

En este caso vemos que la función main se invoca pasándola dos parámetros numéricos (2 y 3) y un tercer parámetro que es la función evalua. La función evalua es la función de callback y cuando se invoca se ha de pasar la variable total que previamente hemos obtenido en la función main sumando las calificaciones de cada uno de los dos ejercicos de los que está compuesto el examen.

https://repl.it/@valoro/JS-funciones-CALLBACK5

 function main(a,b,callback){  
  var total=a+b;  
  callback(total);  
 }  
 function evalua(total){  
  if(total>=5){  
   alert("Prueba superada: "+total);  
  }else{  
   alert("Inténtalo de nuevo: "+total);  
  }  
 }  
 main(2,3,evalua);  

Función principal con parámetros y con función anónima

En este caso convertiremos la función evalua en una función anónima. Otro cambio que hemos realizado es cambiar el nombre de la variable total al recibirla por parte de la función anónima. La variable se recibe con el nombre t. Esto lo hemos hecho únicamente para mostrar que se puede hacer que cuando una función recibe un parámetro éste puede recibirse con un nombre diferente de la variable con la que se ha enviado. Se envía con la variable total y se recibe con la variable t.

https://repl.it/@valoro/JS-funciones-CALLBACK6

 function main(a,b,callback){  
  var total=a+b;  
  callback(total);  
 }  
 main(2,3,function(t){  
  if(t>=5){  
   alert("Prueba superada: "+t);  
  }else{  
   alert("Inténtalo de nuevo: "+t);  
  }  
 });  

Función principal con dos parámetros y dos funciones callback

La función principal se llama operaciones y tiene cuatro parámetros, los dos primeros son números (a y b) y los dos últimos son dos funciones callback denominadas minora y potencias.

• Calculamos la variable diferencia restando a menos b.
• Calculamos la variable elevado usando como base a y como potencia b.
• Invocamos la función de callback denominada minora usando como parámetro la diferencia.
• Invocamos la función de callback denominada elevado usando como parámetro el valor elevado.

Invocamos la función operaciones pasándole cuatro parámetros los dos primeros son numéricos 5 y 3, y los dos últimos son las funciones callback en forma de funciones anónimas.

https://repl.it/@valoro/JS-funciones-CALLBACK7

 function operaciones(a,b,minora,potencias){  
  var diferencia=a-b;  
  var elevado=Math.pow(a,b);  
  minora(diferencia);//invocamos la 1ª función anónima  
  potencias(elevado);//invocamos la 2ª función anónima  
 }  
 operaciones(5,3,  
  function(diferencia){  
   console.log("La diferencia es: ",diferencia);  
  },  
  function(elevado){  
   console.log("Elevando se obtiene: ",elevado);  
  }  
 );  

Ejercicio propuesto

Basándote en el código anterior, modificalo para que la primera frase que se mustre en pantalla sea "La diferencia entre 5 y 3 es: 2", y la segunda frase sea "Elevando 5 a potencia 3 se obtiene: 125". De forma que al cambiar los números 5 y 3 por otros las expresiones que se imprimen en pantalla se adapten a cada caso.

Función principal con tres parámetros y dos funciones callback

La función principal lleva tres parámetros y dos funciones callback. Deseamos calcular la media de tres exámenes. Se aprueba con una media de 5 o más y se obtiene una mención especial si habiendo aprobado en el tercer examen se obtiene una calificación mayor o igual a 7.

https://repl.it/@valoro/JS-funciones-CALLBACK8

 main(5,7,9,evalua1,evalua2);  
 function main(a,b,c,callback1,callback2){  
  var media=(a+b+c)/3;  
  callback1(media);  
  callback2(c,media);  
 }  
 function evalua1(media){  
  document.write("La media de los tres exámenes es: ",media+"<br>");  
 }  
 function evalua2(c,media){  
  if (media>=5 && c>=7){  
   document.write("Mención especial por haber aprobado y tener 7 o más en el 3er examen");  
  }  
 }  

Ejercicio propuesto

Toma el código anterior y conviertelo en un código donde las dos funciones callback a las que se llama sean funciones anónimas.