Tutorial de generadores de JavaScript

Los generadores son un tipo especial de función con la capacidad de pausarse y reanudarse más tarde, lo que permite que se ejecute otro código mientras tanto.

Los generadores son un tipo especial de función con la capacidad de pausarse y reanudarse más tarde, lo que permite que se ejecute otro código mientras tanto.

El código decide que tiene que esperar, por lo que deja que se ejecute otro código "en la cola", y se reserva el derecho de reanudar sus operaciones "cuando lo que está esperando" esté terminado.

Todo esto se hace con una sola palabra clave:yield. Cuando un generador contiene esa palabra clave, la ejecución se detiene.

Un generador puede contener muchosyieldpalabras clave, por lo que se detiene varias veces, y se identifica por el*functionpalabra clave, que no debe confundirse con el operador de desreferencia del puntero utilizado en lenguajes de programación de nivel inferior como C, C ++ o Go.

Los generadores habilitan paradigmas completamente nuevos de programación en JavaScript, permitiendo:

  • Comunicación bidireccional mientras un generador está funcionando
  • de larga vida mientrasbuclesque no congelan su programa

Aquí hay un ejemplo de un generador que explica cómo funciona todo.

function *calculator(input) {
    var doubleThat = 2 * (yield (input / 2))
    var another = yield (doubleThat)
    return (input * doubleThat * another)
}

Lo inicializamos con

const calc = calculator(10)

Luego iniciamos el iterador en nuestro generador:

calc.next()

Esta primera iteración inicia el iterador. El código devuelve este objeto:

{
  done: false
  value: 5
}

Lo que sucede es: el código ejecuta la función, coninput = 10como se pasó en el constructor del generador. Corre hasta que llega alyieldy devuelve el contenido deyield:input / 2 = 5. Entonces obtuvimos un valor de 5, y la indicación de que la iteración no se realizó (la función simplemente está en pausa).

En la segunda iteración pasamos el valor7:

calc.next(7)

y lo que recuperamos es:

{
  done: false
  value: 14
}

7fue colocado como el valor dedoubleThat. Importante: es posible que lea comoinput / 2fue el argumento, pero ese es solo el valor de retorno de la primera iteración. Ahora lo omitimos y usamos el nuevo valor de entrada,7, and multiply it by 2.

Luego llegamos al segundo rendimiento, y eso regresadoubleThat, por lo que el valor devuelto es14.

In the next, and last, iteration, we pass in 100

calc.next(100)

y a cambio tenemos

{
  done: true
  value: 14000
}

A medida que se realiza la iteración (no se encuentran más palabras clave de rendimiento) y simplemente regresamos(input * doubleThat * another)que asciende a10 * 14 * 100.


Más tutoriales de js: