Los callbacks son la manera con la que nombraron por convención a las funciones que se pasan como argumentos de otra función, no hay nada dentro del lenguaje javascript denominado 'callback'. ¿Cómo se usan los callback? ¿Qué es callback hell?

Antes de definir que es un callback hell repasemos sobre cómo se utilizan. Vamos con un ejemplo, tenemos dos funciones que realizan cierta tarea y tienen que ir por orden, primero se debe ejecutar la primera, y luego la segunda :

function voyPrimera(){
	console.log("Voy primera");
}

function voySegunda(){
	console.log("Voy segunda");
}

voyPrimera(); 
voySegunda(); 

// OUTPUT : "Voy primera"
// OUTPUT : "Voy segunda"

Todo bien hasta ahí... supongamos que la funcion 'voyPrimera' se comunica con un servicio externo y tarda unos milisegundos.¿ Qué ocurre ?
Para el ejemplo vamos a usar setTimeOut para simular una demora de 3 segundos:

function voyPrimera(){
	setTimeOut(function(){
	console.log("Voy primera");
	}, 3000);
}

function voySegunda(){
	console.log("Voy segunda");
}

voyPrimera();
voySegunda(); 

// OUTPUT : "Voy segunda"
// OUTPUT : "Voy primera"

Por consola vemos que primero loguea el mensaje de la segunda función, y una vez que se cumplen los 3 segundos, vemos el mensaje de nuestra primera función. No es el resultado que esperabamos, en una situación mucho más compleja en donde dependamos de la respuesta de la primera función para que otra pueda ejecutarse, estaríamos en un gran problema. Si bien hay muchas maneras de solucionar nuestro problema, voy a mostrar cómo se haría con callbacks.
Nuestro objetivo es el de ejecutar las funciones en orden. Para esto vamos a indicarle a nuestra primera función que reciba por parámetro la función que queremos que se ejecute justo después:

	
function voyPrimera(callback){
	setTimeOut(function(){
	console.log("Voy primera");
	callback();
	},
	3000);
}

function voySegunda(){
	console.log("Voy segunda");
}

voyPrimera(voySegunda);
 
// OUTPUT : "Voy primera"
// OUTPUT : "Voy segunda"

Bueno!!, ahora vamos con un ejemplo en donde veamos varias funciones anidadas.
Un ejemplo que seguro vimos es el caso cuando utilizamos la funcion de window 'setTimeout', esta recibe dos parámetros, el primero es una función ( o sea un callback) y el segundo un numero haciendo referencia a los milisegundos en los que queremos que se ejecute dicha función.
Vamos a usar setTimeout para simular asincronia. Supongamos que tenemos una funcion 'irDePaseo' en donde vamos llenando un array llamado 'lugaresVisitados'. Cada lugar se carga en el array luego de un segundo. Entonces, tenemos una función que adentro tiene otra función, que adentro tiene otra función y así...

	
const lugaresVisitados = []

function irDePaseo() {

	setTimeout(function() {
		lugaresVisitados.push('Salta');
		
		setTimeout(function() {
			lugaresVisitados.push('Jujuy');
			
			setTimeout(function() {
				lugaresVisitados.push('Cordoba');
				
				setTimeout(function() {
					lugaresVisitados.push('Tierra del fuego');
				},1000);
			},1000);
		},1000);
	},1000);
}

irDePaseo();
console.log(lugaresVisitados.toString()); // OUTPUT : []

Este anidamiento de funciones, se suele denominar CALLBACK HELL. Y uno de sus problemas es el que vemos en el ejemplo en donde estamos logueando algo que todavia no se ejecuto. Para lograr el resultado esperado, tenemos que revisar cuidadosamente el flujo y loguear nuestro mensaje justo después de la última función que se ejecuta dentro de 'irDePaseo'.

	
const lugaresVisitados = []

function irDePaseo() {

	setTimeout(function() {
		lugaresVisitados.push('Salta');
		
		setTimeout(function() {
			lugaresVisitados.push('Cordoba');
			
			setTimeout(function() {
				lugaresVisitados.push('Jujuy');
				
				setTimeout(function() {
					lugaresVisitados.push('Tierra del fuego');
					console.log(lugaresVisitados.toString())
				},1000);
			},1000);
		},1000);
	},1000);
}

irDePaseo();// OUTPUT : Salta, Cordoba, Jujuy, Tierra del fuego

Encontramos el problema y lo solucionamos, pero primero tuvimos que leer el código con mucha atención y revisar el flujo. Obviamente esto siempre se hace pero en este caso se complicó aún más ya que las funciones anidadas no ayudan a la legibilidad, y por ende hace que el código sea costoso de mantener.
Tengamos en cuenta que estos ejemplos son muy sencillos, en casos reales la legibilidad utilizando tantas funciones anidadas empeora. Una de las opciones para no usar callbacks y no caer en el callback hell es el uso de las 'promises' introducidas en EcmaScript 6.

Mandanos tus sugerencias

Ayudanos con ideas para los artículos de este blog a contacto@somospnt.com

¡Seguínos en nuestras redes sociales para enterarte de los últimos posts!