La guía avanzada de JavaScript: generadores. Parte 2, un caso de uso simple

El comportamiento de los generadores descrito en el artículo anterior no es complejo, pero definitivamente sorprende y puede parecer confuso al principio. Entonces, en lugar de aprender nuevos conceptos, ahora haremos una pausa y veremos un ejemplo interesante de uso de generadores.



Tengamos una función como esta:

function maybeAddNumbers() {
    const a = maybeGetNumberA();
    const b = maybeGetNumberB();

    return a + b;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Funciones maybeGetNumberA



y maybeGetNumberB



números de retorno, pero a veces pueden devolver null



o undefined



. Esto se evidencia con la palabra "tal vez" en sus nombres. Si esto sucede, no intente poner estos valores (por ejemplo, el número y null



), es mejor detenerse y regresar, digamos null



. Es decir null



, y no algún valor impredecible obtenido al sumar null



/ undefined



con un número u otro null



/ undefined



.



Por lo tanto, debe verificar que los números estén realmente definidos:

function maybeAddNumbers() {
    const a = maybeGetNumberA();
    const b = maybeGetNumberB();

    if (a === null || a === undefined || b === null || b === undefined) {
        return null;
    }

    return a + b;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Todo funciona, pero si a



es null



o undefined



, entonces no tiene sentido llamar a la función maybeGetNumberB



. Sabemos que será devuelto de todos modos null



.



Reescribamos la función:

function maybeAddNumbers() {
    const a = maybeGetNumberA();

    if (a === null || a === undefined) {
        return null;
    }

    const b = maybeGetNumberB();

    if (b === null || b === undefined) {
        return null;
    }

    return a + b;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Entonces. En lugar de tres simples líneas de código, lo ampliamos rápidamente a 10 líneas (sin contar las vacías). Y ahora se aplican las funciones if



, que debe recorrer para comprender qué hace la función. ¡Y esto es solo un ejemplo educativo! Imagine una base de código real con una lógica mucho más compleja, lo que dificulta aún más las comprobaciones. Me gustaría usar generadores aquí y simplificar el código.



Echar un vistazo:

function* maybeAddNumbers() {
    const a = yield maybeGetNumberA();
    const b = yield maybeGetNumberB();

    return a + b;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

¿Y si pudiéramos dejar que la expresión yield <smething>



pruebe si es un <smething>



valor real y no null



o undefined



? Si resulta que no es un número, simplemente nos detenemos y regresamos null



, como en la versión anterior del código.



Es decir, se puede escribir código que se ve como que sólo trabaja con valores reales, definidas. ¡El generador puede verificar esto y tomar las medidas adecuadas para usted! Magia, ¿verdad? Y no solo es posible, ¡es fácil de escribir!



Por supuesto, los propios generadores no tienen esta funcionalidad. Simplemente devuelven iteradores, y puede insertar valores nuevamente en los generadores si lo desea. Así que tenemos que escribir un contenedor, que así sea runMaybe



.



En lugar de llamar a la función directamente:

const result = maybeAddNumbers();

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

lo llamaremos como un argumento contenedor:

const result = runMaybe(maybeAddNumbers());

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Este patrón es muy común en generadores. Por sí mismos, no saben mucho, pero con la ayuda de envoltorios escritos por ellos mismos, ¡puede darles a los generadores el comportamiento deseado! Eso es lo que necesitamos ahora.



runMaybe



- una función que toma un argumento: un iterador creado por el generador:

function runMaybe(iterator) {

}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Ejecutemos este iterador en un bucle while



. Para hacer esto, debe llamar al iterador por primera vez y comenzar a verificar su propiedad done



:

function runMaybe(iterator) {
    let result = iterator.next();

    while(!result.done) {

    }
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Dentro del bucle, tenemos dos posibilidades. Si result.value



es null



o undefined



, la iteración debe detenerse inmediatamente y devolverse null



. Hagámoslo:

function runMaybe(iterator) {
    let result = iterator.next();

    while(!result.done) {
        if (result.value === null || result.value === undefined) {
            return null;
        }
    }
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Aquí, return



detenemos inmediatamente la iteración con ayuda y regresamos del contenedor null



. Pero si result.value



es un número, entonces necesita "regresar" al generador. Por ejemplo, si la yield maybeGetNumberA()



función maybeGetNumberA()



es un número, entonces necesita reemplazar el yield maybeGetNumberA()



valor de ese número. Déjame explicarte: digamos que el resultado del cálculo maybeGetNumberA()



es 5, luego reemplazamos const a = yield maybeGetNumberA();



con const a = 5;



. Como puede ver, no necesitamos cambiar el valor extraído, es suficiente con pasarlo de nuevo al generador.



Recordamos que puede reemplazar yield <smething>



con algún valor pasándolo como argumento al método next



en un iterador:

function runMaybe(iterator) {
    let result = iterator.next();

    while(!result.done) {
        if (result.value === null || result.value === undefined) {
            return null;
        }

        // we are passing result.value back
        // to the generator
        result = iterator.next(result.value)
    }
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Como puede ver, el nuevo resultado ahora se almacena nuevamente en una variable result



. Esto es posible porque declaramos específicamente el result



uso de let



.



Ahora, si el generador encuentra un null



/ al recuperar un valor undefined



, simplemente regresamos null



del contenedor runMaybe



.



Queda por añadir algo más para que el proceso de iteración finalice sin detectar null



/ undefined



. Después de todo, si obtenemos dos números, ¡entonces debemos devolver su suma del contenedor!



El generador maybeAddNumbers



termina con una expresión return



. Entendemos que la presencia return <smething>



en el generador hace que devuelva next



un objeto de la llamada { value: <smething>, done: true }



. Cuando esto sucede, el ciclo se while



detiene porque la propiedad done



obtiene un valor true



. ¡Pero el último valor devuelto (en nuestro caso particular, esto a + b



) aún se almacenará en la propiedad result.value



! Y podemos simplemente devolverlo:

function runMaybe(iterator) {
    let result = iterator.next();

    while(!result.done) {
        if (result.value === null || result.value === undefined) {
            return null;
        }

        result = iterator.next(result.value)
    }

    // just return the last value
    // after the iterator is done
    return result.value;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

¡Y es todo!



Creemos funciones maybeGetNumberA



y maybeGetNumberB



, y dejemos que devuelvan números reales primero:

const maybeGetNumberA = () => 5;
const maybeGetNumberB = () => 10;

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Ejecutemos el código y registremos el resultado:

function* maybeAddNumbers() {
    const a = yield maybeGetNumberA();
    const b = yield maybeGetNumberB();

    return a + b;
}

const result = runMaybe(maybeAddNumbers());

console.log(result);

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Como era de esperar, aparecerá en la consola el número 15.



Ahora, reemplace uno de los términos con null



:

const maybeGetNumberA = () => null;
const maybeGetNumberB = () => 10;

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Al ejecutar el código, obtenemos null



!



Sin embargo, es importante para nosotros asegurarnos de que maybeGetNumberB



no se llame a la función si maybeGetNumberA



devuelve null



/ undefined



. Comprobemos nuevamente que el cálculo fue exitoso. Para hacer esto, simplemente agregue a la segunda función console.log



:

const maybeGetNumberA = () => null;
const maybeGetNumberB = () => {
    console.log('B');
    return 10;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Si hemos escrito correctamente el contenedor runMaybe



, cuando se ejecute este código, la letra B



no aparecerá en la consola.



Efectivamente, al ejecutar el código, veremos simplemente null



. Esto significa que la envoltura realmente detiene el generador tan pronto como detecta null



/ undefined



.



El código funciona según lo previsto: produce null



cualquier combinación:

const maybeGetNumberA = () => undefined;
const maybeGetNumberB = () => 10;
const maybeGetNumberA = () => 5;
const maybeGetNumberB = () => null;
const maybeGetNumberA = () => undefined;
const maybeGetNumberB = () => null;

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Etc.



Pero el beneficio de este ejemplo no radica en la ejecución de este código en particular. Se basa en el hecho de que hemos creado un contenedor universal que puede funcionar con cualquier generador que pueda extraer valores null



/ undefined



.



Escribamos una función más compleja:

function* maybeAddFiveNumbers() {
    const a = yield maybeGetNumberA();
    const b = yield maybeGetNumberB();
    const c = yield maybeGetNumberC();
    const d = yield maybeGetNumberD();
    const e = yield maybeGetNumberE();
    
    return a + b + c + d + e;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

¡Puedes hacerlo en nuestra envoltura sin ningún problema runMaybe



! De hecho, ni siquiera le importa al contenedor que nuestras funciones devuelvan números. Después de todo, no mencionamos el tipo numérico. Por lo tanto, puede usar cualquier valor en el generador (números, cadenas, objetos, matrices, estructuras de datos más complejas) ¡y funcionará con nuestro contenedor!



Esto es lo que inspira a los desarrolladores. Los generadores le permiten agregar funcionalidad personalizada a su código, que parece muy común (aparte de las llamadas, por supuesto yield



). Solo necesita crear un contenedor que repita el generador de una manera especial. Por lo tanto, el contenedor agrega la funcionalidad necesaria al generador, ¡que puede ser cualquier cosa! Los generadores tienen posibilidades casi ilimitadas, se trata de nuestra imaginación.