¿Cuál es la diferencia entre las palabras clave await y yield en JavaScript?

En este artículo, veremos cómo la palabra clave Await es diferente de las palabras clave de rendimiento.

Funciones generadoras: las funciones que pueden devolver múltiples valores en diferentes intervalos de tiempo según las demandas del usuario y pueden administrar su estado interno son funciones generadoras . Una función se convierte en una función de generador si utiliza la sintaxis de función* . Son diferentes de las funciones normales porque las funciones normales se completan en una sola ejecución, mientras que podemos pausar y reanudar la función del generador.

Nota: Cuando se ejecutan las funciones del generador, devuelve un nuevo objeto Generador.

funcionalidad:  yield y await se pueden usar para escribir código asincrónico que «espera», lo que significa código que parece ser sincrónico, aunque en realidad lo es.

await: Este es un operador que solía esperar una Promesa. En nuestro código JavaScript normal, lo usamos dentro de la función asíncrona y se puede usar solo con módulos JavaScript.

Cuando usamos la palabra clave await en una expresión, la ejecución de la función asíncrona se pausará hasta que se liquide la promesa (es decir, se cumpla o se rechace), y para reanudar la ejecución de la función asíncrona después del cumplimiento. Cuando se reanuda, el valor de la expresión de espera es el de la Promesa cumplida.

Sintaxis:

var result = await expression;

expresión: una promesa o cualquier valor que esperar.

resultado: contiene el valor de la promesa (valor resuelto).

Ejemplo:

<script>
    function calculate(y) {
        var promise = new Promise(function(resolve, reject) {
            setTimeout(function() {
                resolve(calculateSquare(y));
            }, 3000);
        });
        return promise;
    }
 
    function calculateSquare(y) {
        return y * y;
    }
 
    async function main() {
 
        /* The expression following the await
        the operator is not a Promise, it's
        converted to a resolved Promise.*/
 
        // Code will be synchronized
        var s1 = await calculate(5);
 
        // After 3 sec this line will get execute
        console.log("Square of 5 is : " + s1);
        var s2 = await calculate(10);
 
        // After 3 sec next this line will get execute
        console.log("Square of 10 is : " + s2);
 
         // In last this line will get execute
        console.log("End");
    }
 
    main()
</script>

(nota: ejecute el código anterior en node.js)

Producción:

yield: la palabra clave yield se utiliza para pausar y reanudar una función de generador .

La palabra clave yield se usa para pausar la ejecución de la función del generador, y el valor final de la expresión será el valor seguido por la palabra clave yield que se devuelve a la persona que llama al generador.

Hace que la llamada al método next() del generador devuelva un objeto IteratorResult con dos propiedades: 

• value: Es el valor devuelto por la palabra clave yield.
• done: es de tipo booleano. (si done es falso, significa que la función del generador no se ha completado por completo ).

Utilizándolo, podemos crear un iterador para atravesar datos.

Sintaxis:

var result = yield expression;

expresión: el valor a devolver de la función generadora. 

resultado: recupera el valor opcional pasado al método next() del generador para reanudar su ejecución.

Ejemplo:

<script>
    function* getValues(start, end) {
        while (start <= end) {
            yield start;
            start++;
        }
    }
 
    /* Expression */
    var it = getValues(5, 10);
 
    /* Generator's next() method  return an
    IteratorResult object with two
    properties: value and done*/
 
    //element : {value : Object ,done : boolean}
    var element = it.next();
 
    while (element.done == false) {
        console.log(element);
        element = it.next();
    }
 
    // value:undefined, and done : false
    console.log(element);
</script>

(nota: ejecute el código anterior en node.js)

Producción: