¿Sabes en qué consiste callback hell en JavaScript? JavaScript es un lenguaje de programación muy poderoso que se distingue de los demás de muchos modos. No solamente se distingue porque es un lenguaje que nos permite programar tanto para el frontend como para el backend de la web, sino también porque se basa en eventos en vez de en cadenas.
Esta base le permite a JavaScript crear asincronía, un concepto que se refiere a la habilidad de programar acciones que pueden ser ejecutadas en tiempos no inmediatos. Para ello, se utilizan promesas, condicionales y métodos de tiempo de callback hell. En este post, te enseñaremos qué es el callback hell en JavaScript, un fenómeno que surge de la asincronía de este lenguaje de programación.
¿Qué es el callback hell en JavaScript?
Antes de explicarte qué es el callback hell en JavaScript, te sugerimos leer nuestros posts sobre qué son las promesas en JavaScript y cómo anidar métodos en JavaScript. Estos dos te darán el contexto necesario para entender mejor este fenómeno.
Ahora, ya que sabes cómo funcionan las promesas y la anidación de métodos, ¿qué crees que pasa cuando queremos ir anidando comportamientos usando promesas? A continuación, te ponemos un ejemplo para callback hell.
Supongamos que queremos hacer una llamada al servidor API en callback hell in JavaScript. Para ello, se crea una promesa (promise 1) con una gestión de respuesta (response). Ahora, pensemos que queremos ejecutar una acción asincrónica distinta que depende de esta respuesta. Entonces, crearemos otra promesa (promise 2) anidada a la primera. Esta promesa, a su vez, debe gestionarse con un método then. Aquí hemos empezado un árbol de promesas que puede detenerse o continuar del callback hell in JavaScript.
Este ciclo de promesas puede continuar cada vez que queramos ejecutar una acción dependiente del resultado anterior y gestionarla. Este árbol de promesas se vería similar a las líneas de código que te mostramos a continuación, cada una ejecutando una acción individual, pero que impacta en las demás:
// llamar al servidor
p1.then (response => {
// enviar los datos a la db
p2.then (response2 {
// recoger el resultado de la db y escribirlo en un log
p3.then (response3 => {
// cuando el log pasa de 3MB, subirlo a un s3
p4.then (response4 => {
p5.then (response5 => {
}
En las líneas de código anteriores, hemos hecho que los comportamientos que queremos ir gestionando se aniden, creando una dependencia de referencias eterna. A esta anidación de acciones la llamamos callback hell en JavaScript. Esta situación es tan conocida en el mundo de la programación que tiene su propia página web. Además, el proceso que nos lleva a ella se conoce como highway to callback hell. Por ello, te invitamos a leer la página callbackhell.com para conocer más sobre este fenómeno de callback hell.
La anidación de acciones a ejecutar o callback hell también puede suceder cuando usamos los condicionales if …else, que nos ayudan a plantear situaciones en las que una acción sucede si algo pasa y otra si esto no pasa. Para conocer más sobre este condicional, te invitamos a leer nuestro post sobre cómo usar if else else en JavaScript, relacionado al callback hell in JavaScript. Esta situación es relativamente fácil de romper cuando utilizamos if, pero no es el caso de las promesas.
¿Qué hacer con el callback hell en JavaScript?
Ahora que sabes qué es el callback hell en JavaScript, seguro que estás pensando en cómo evitar esta situación. La realidad es que hay muchos momentos en los que deberás anidar promesas o condicionales, porque solo así crearás cadenas de acciones asíncronas. Por ello, debes pensar en cómo resolver el callback hell, no en cómo evitarlo. Una de las maneras más populares de hacerlo es a través de los métodos async y await.
Para conocer más sobre la resolución de este fenómeno, te invitamos a leer nuestro artículos sobre los métodos async y await en JavaScript, al igual que nuestro post sobre cómo deshacer el callback hell en JavaScript.
¿Te animas a seguir aprendiendo?
Tras leer este post, sabes exactamente qué es callback hell en JavaScript y puedes intentar solucionarlo, pero ¡todavía queda mucho por aprender si quieres dominar este lenguaje de programación! Por ello, te invitamos a ser parte de nuestro Desarrollo Web Full Stack Bootcamp, en donde seguirás aprendiendo sobre lenguajes de programación para la web, como pueden ser CSS, HTML y JavaScript, y te convertirás en un experto en el ámbito del desarrollo web. ¿A qué estás esperando para unirte? ¡Te esperamos!
