La locura de los Callbacks en javascript [JS]

¡Hola! Joven Padawan 🚀. Acompáñame a entender uno de los conceptos mas confusos cuando inicias en el mundo de Javascript. Los Callbacks 🤓. Si eres un joven programador, este post es para ti.

¿Qué es un Callback? 🤔

Un callback en JavaScript es una función que se pasa como argumento a otra función. Es una forma de asegurar que ciertas partes del código no se ejecutan hasta que otras partes ya se han completado.

¿Cómo se ve un Callback? 👁️

Imagina que tienes un amigo robot 🤖 que está aprendiendo a hacer un sandwich. Podrías darle las instrucciones paso a paso de la siguiente manera:

function hacerSandwich() {
    conseguirPan();
    agregarRelleno();
    servir();
}

Estas funciones se ejecutan una después de la otra, pero, ¿qué pasaría si conseguirPan() toma mucho tiempo? Tal vez el robot comenzaría a agregarRelleno() incluso antes de tener el pan, lo que resultaría en un desastre en la cocina 🤡. Yo no quiero un sandwich que no tenga pan.

Para evitar esto, puedes decirle al robot que solo empiece a agregarRelleno() después de que conseguirPan() se haya completado, utilizando un callback.

function conseguirPan(callback) {
    // Imagina que este proceso toma algún tiempo
    console.log('Consiguiendo el pan...');

    // Después de que se haya conseguido el pan
    callback();
}

function hacerSandwich() {
    conseguirPan(function() {
        agregarRelleno();
        servir();
    });
}

Ahora, el robot solo comenzará a agregarRelleno() después de que conseguirPan() se haya completado gracias a la función callback 🥪.

Un Ejemplo de la Vida Real 👌

Poniendonos mas serios veamos un ejemplo de la vida real. Imagina que tienes una aplicación para manejar una tienda en línea 🛒. Un usuario puede hacer clic en un botón para comprar un producto, pero no quieres que se le cobre hasta que hayas comprobado que el producto está en stock.

function revisarInventario(callback) {
    // Comprobar el inventario podría llevar algún tiempo
    console.log('Revisando inventario...');

    // Después de comprobar el inventario
    callback();
}

function comprarProducto() {
    revisarInventario(function() {
        cobrarAlUsuario();
        enviarProducto();
    });
}

En este ejemplo, cobrarAlUsuario() y enviarProducto() solo se ejecutan después de que revisarInventario() se haya completado.

Conclusión 🧏‍♂️

Los callbacks en JavaScript son una herramienta esencial para controlar el flujo de nuestras operaciones, especialmente cuando hay procesos que pueden tomar tiempo para completarse. Como vimos en nuestros ejemplos, desde un robot haciendo un sandwich hasta el manejo de un inventario de tienda en línea, los callbacks nos permiten asegurar que ciertas partes de nuestro código no se ejecuten hasta que otras hayan terminado.

Pero recuerda, mientras que los callbacks pueden ser increíblemente útiles, a veces pueden resultar en lo que se llama "callback hell" - un montón de funciones anidadas que son difíciles de leer y mantener. Por eso, aunque son una parte fundamental de JavaScript, es importante conocer otras formas de manejar el código asíncrono, como las Promesas y async/await.

Por último, nunca olvides que el objetivo es escribir código que sea fácil de leer y mantener. A medida que ganas experiencia, aprenderás cuándo y dónde usar cada herramienta. ¡Sigue codificando, sigue aprendiendo y sigue construyendo! 💻🚀