ES6: generator

For of y for in

Si no entendiste ese ciclo for dejame explicarte. Ese bucle for valor of iterable recorre iterables, como arrays, Map o Set. El valor es cada elemento del iterable puede tener cualquier nombre, por eso se inicia con let nombre.

const array = [5, 4, 3, 2, 1]

for (let numero of array) {
  console.log(numero) // 5 4 3 2 1
}

Sin embargo, debes tener en cuenta que solo podrás acceder a sus valores, y no a sus referencias, por lo que si quieres cambiar los elementos del array, necesitarás un índice array[indice].

for (let numero of array) {
  valor *= 2 
  console.log(numero) // 10 8 6 4 2
}
 
console.log(array) // [ 5, 4, 3, 2, 1 ]

Si intentas recorrer un objeto de esta forma for elemento of objeto, te ocurrirá un error, porque un objeto no es un iterable. En su lugar puedes utilizar for elemento in objeto, que recorrerá las propiedades del objeto.

const objeto = { a: 1, b: 2, c: 3 }

for (let elemento in objeto) {
  console.log(elemento) // 'a' 'b' 'c'
}

Sin embargo, si utilizas for elemento in array, no dará un error, pero el resultado no será el esperado, ya que los arrays son un tipo de objeto donde cada propiedad es el índice del valor del array o del iterable. Por lo que debes tener cuidado.

const array = [5, 4, 3, 2, 1]

for (let elemento in array) {
  console.log(elemento) // '0' '1' '2' '3' '4'
}

/* const array = {
	'0': 5,
  '1': 4,
  '2': 3,
  '3': 2,
  '4': 1
}*/

Hola Chi@s 😃
ES6: Generator

function* iterate(array)  {
    for (let value of array) {
        yield value;
    }
}

const it = iterate(["Oscar", "Alexa", "David", "Gerlis"]);
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value); ```

IMO generator tiene una especie de lifecycle (no se explica como tal) pero es una buena manera de entenderlo, te dejo una descripción gráfica

La palabra clave **yield **detiene la ejecución de la función generadora y el valor de la expresión que sigue a la palabra clave yield se devuelve

yield <expression>

Si expression se omite, devuelve undefined en su lugar.

Para entender las clases me está resultando más fácil/práctico leer la descripción en los Recursos. A veces siento que el profe se enreda mucho.

Hay diferentes motivos por los que se usan estos generadores, uno de ellos es imaginarse una lista muy grande, de esta forma solo carga en memoria el siguiente valor, ahorrando asi recursos de la maquina

Les dejo un video que ayuda a entender mejor los Generators

https://youtu.be/tEkWs8RCkQQ

En la clase le entiendo a los ejemplos, los conceptos los entiendo solo en el aporte bajo la clase.

https://www.youtube.com/watch?v=wl6X2XFnNtY&t=186s

Una explicación fenomenal para entender las funciones generadoras. Un buen complemento a esta clase si es que quieres ser un verdadero experto en javascript.

ES6: generators

En ES6 (EcmaScript 2015), se introdujeron los generadores, que son una característica poderosa para trabajar con secuencias de valores de una manera controlada y pausada. Los generadores permiten crear funciones especiales que pueden pausarse y reanudarse durante su ejecución, lo que facilita la creación de iteradores personalizados y tareas asincrónicas.

Un generador se define utilizando una función especial llamada function*, y dentro de esta función, puedes usar la palabra clave yield para producir valores y pausar la ejecución. Aquí hay un ejemplo básico:

function* contador() {
  let i = 0;
  while (true) {
    yield i;
    i++;
  }
}

const iterador = contador();

console.log(iterador.next().value); // 0
console.log(iterador.next().value); // 1
console.log(iterador.next().value); // 2
// Y así sucesivamente...

En este ejemplo, la función generadora contador produce una secuencia infinita de números, pausando la ejecución después de cada yield.

Los generadores son especialmente útiles cuando se trata de tareas asincrónicas, ya que permiten escribir código asíncrono de manera más secuencial y comprensible. Por ejemplo, aquí hay un ejemplo simplificado de cómo podrías usar un generador para controlar tareas asincrónicas:

function* tareaAsincronica() {
  const resultado1 = yield obtenerResultado1();
  const resultado2 = yield obtenerResultado2(resultado1);
  return resultado2;
}

const iterador = tareaAsincronica();

iterador.next().value.then(resultado1 => {
  iterador.next(resultado1).value.then(resultado2 => {
    const resultadoFinal = iterador.next(resultado2).value;
    console.log(resultadoFinal);
  });
});

En este ejemplo, el generador tareaAsincronica controla la ejecución de dos tareas asincrónicas (obtenerResultado1 y obtenerResultado2) de manera secuencial, pausando la ejecución en cada yield hasta que se resuelvan las promesas.

Los generadores son una herramienta poderosa en JavaScript que pueden mejorar la legibilidad y la lógica de código complejo, especialmente cuando se trabaja con tareas secuenciales o asincrónicas.

Este es un concepto algo avanzado, supongo que lo entenderemos con el pasar del tiempo. 👀

Sigamos aprendiendo JavaScript. 👨‍💻

Generator nos va a permitir tener una función, de tipo especial, que nos va ar retornar una serie de valores seg{un el algoritmo dado, recordando este recurso.

Que triste que este curso se explique tan a la ligera.

✨🦄Hay varias cosas que recalcar sobre los generadores:

• Cuando se utiliza la palabra reservada yield, se retorna el valor actual del generador y se pausa la ejecución del mismo, por lo que cuando se vuelve a llamar al generador con next(), este se ejecutará desde la siguiente línea del último yield. Es por eso que cada vez que usamos next(), nos retorna el siguiente valor del generador, debido a que yieldse encuentra en un ciclo for of

• Estos se pueden anidar, es decir, que se puede ejecutar más generadores mientras ya hay uno en ejecución.

Los generadores en JavaScript son funciones especiales que pueden ser pausadas y reanudadas en diferentes puntos de ejecución. Estas funciones generan una secuencia de valores en lugar de devolver un solo valor.

Aquí hay algunos conceptos clave para entender los generadores en JavaScript:

1. Funciones especiales: Los generadores se definen usando la sintaxis function*. Por ejemplo, function* miGenerador() { ... }.

2. Valores múltiples: A diferencia de las funciones regulares que devuelven un solo valor y finalizan, los generadores pueden generar una secuencia de valores usando la palabra clave yield. El yield pausa la ejecución del generador y devuelve un valor. Luego, se puede reanudar desde el punto de pausa para generar el siguiente valor.

3. Iteración controlada: Los generadores se utilizan junto con un iterador para recorrer la secuencia de valores generados. Un iterador es un objeto que implementa el protocolo de iteración y proporciona los métodos next(), return() y throw().

4. Pausa y reanudación: Los generadores pueden ser pausados en cualquier momento utilizando yield y reanudados más tarde cuando se invoca el método next() en el iterador asociado. Cada vez que se llama a next(), el generador se ejecuta hasta encontrar la próxima declaración yield, donde se pausa nuevamente y devuelve un objeto con el valor generado y un indicador done que indica si el generador ha terminado.

5. Control de flujo flexible: Los generadores permiten un control de flujo más flexible, ya que puedes pausar la ejecución en cualquier momento, realizar acciones adicionales y luego reanudar desde donde se dejó.

Los generadores son útiles para trabajar con secuencias de valores grandes o infinitas, realizar iteraciones personalizadas y manejar el control de flujo complejo. Al utilizar generadores, puedes escribir código más legible y eficiente al evitar generar y almacenar todos los valores de una vez. Un ejemplo de como se usa de una forma avanzada es:

function fibonacci() {
  var a = yield 1;
  yield a * 2;
}

var it = fibonacci();
console.log(it);          // "Generator {  }"
console.log(it.next());   // 1
console.log(it.send(10)); // 20
console.log(it.close());  // undefined
console.log(it.next());   // throws StopIteration (as the generator is now closed)

Si quieren investigar más vayan a https://developer.mozilla.org

Generator

Los generadores se definen utilizando la palabra clave function* en lugar de simplemente function. Dentro de un generador, puedes usar la palabra clave yield para pausar la ejecución y devolver un valor. Posteriormente, puedes reanudar la ejecución del generador y pasar datos nuevamente utilizando el método next().
ChatGPT

con esta explicacion me quedo mucho mas claro el funcionamiento de los generadores

Queria comentar que despues de esta clase, tuve que indagar mas en el tema y si quieren saber mas sobre las funciones generadoras les recomiendo estos enlaces

https://www.youtube.com/watch?v=wl6X2XFnNtY
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/yield
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Generator

• ¿Qué es un generador?
  Un generador es una función que puede detenerse a la mitad y luego continuar desde donde se detuvo. En resumen, un generador parece ser una función pero se comporta como un iterador.

• Casos donde los generadores son útiles.
  Los generadores son útiles cuando se trata de secuencias infinitas, ejecución diferida, cómputos masivos, operaciones asincrónicas, etc.

• ¿Cómo crear un generador?
  Se crea un generador agregando un asterisco (*) a la palabra clave de la función. Una función generadora puede tener una o más expresiones de rendimiento. Se utiliza una expresión de rendimiento para pausar el generador y proporciona un valor a la persona que llama. La expresión de rendimiento se utiliza para producir una secuencia de valores.

Generator
.
Un generador en JavaScript es una función que puede pausar su ejecución y luego reanudarla más tarde. La función se ejecuta hasta encontrar una declaración yield, momento en el cual se pausa y devuelve el valor especificado por yield. Luego, cuando se llama al método next() en el iterador devuelto por el generador, la función se reanuda desde el punto en el que se detuvo y continúa ejecutándose hasta encontrar la siguiente declaración yield.
.
El generador mantiene su estado interno, lo que significa que puede recordar las variables y el contexto en el que se encontraba cuando se pausó. Esto permite que el generador produzca una secuencia de valores a medida que se llama repetidamente a next().
.
Cada vez que se hace .next(), se devuelve un objeto con dos propiedades: value, que contiene el valor actual del iterador, y done, que indica si se ha alcanzado el final del iterador.
.
En resumen, un generador es una forma de producir una secuencia de valores a medida que se necesitan, pausando y reanudando su ejecución según sea necesario. Es una herramienta poderosa para trabajar con secuencias o iterables en JavaScript.

que pasa si no le pongo el signo * a la function

otra forma

function* generateNumbers(){
    yield 1;
    yield 2;
    yield 3;
    yield 4;
}
const numbers = generateNumbers();
for (let i=0; i<4; i++){
    console.log(numbers.next().value);
}

const array2 = { a: 1, b: 2, c: 3 };

console.log('{');

for (let obj in array2) {
  for (let i = 0; i < Object.keys(array2).length; i++) {
    if (obj.match(Object.keys(array2)[i])) {
      console.log(`[${obj} : ${Object.values(array2)[i]}]${obj.length >= i ? "," : ""}`);
    }
  } 
}

console.log('}');

Consola:
{
[a : 1],
[b : 2],
[c : 3]
}

const array1 = [5, 4, 3, 2, 1];

for (let numero of array1) {
  console.log(numero);
}

Consola:
5
4
3
2
1

📁 Archivos del Proyecto 📁

Pasos 📌

• • Dentro de la carpeta es6, crear el archivo llamado: 09-generator.js
  • • ◦ El código queda:

//Compilar: seleccionar el código + click derecho + Run Code

//Ejercicio #1

function* iterate(array){
	for(let value of array){
		yield value;
	}
}

const it = iterate(['Oscar', 'David', 'Ana', 'Ulises', 'Jennifer']);
console.log(it.next().value);

/*output:
Oscar
*/

console.log(it.next().value);

/*output:
David
*/

console.log(it.next().value);

/*output:
Ana
*/

console.log(it.next().value);

/*output:
Ulises
*/

console.log(it.next().value);

/*output:
Jennifer
*/

console.log(it.next().value);

/*output:
undefined
*/

1. for…of con generadores:

El bucle for…of se utiliza para iterar sobre los valores generados por un generador. Para ello, necesitaremos que el generador implemente un iterador. El iterador se logra agregando un método especial Symbol.iterator a nuestro generador.

Aquí tienes un ejemplo de cómo usar for…of con un generador:

function* miGenerador() {
  yield 'Hola';
  yield 'mundo';
  yield 'generador!';
}

const generador = miGenerador();

for (const valor of generador) {
  console.log(valor); // Imprime 'Hola', 'mundo', 'generador!'
}

En este ejemplo, definimos la función generadora miGenerador(). Luego, creamos un objeto generador llamado generador utilizando miGenerador(). Finalmente, utilizamos el bucle for…of para iterar sobre los valores generados por generador e imprimir cada valor en la consola.

2. for…in con generadores:

El bucle for…in se utiliza para iterar sobre las propiedades de un objeto, incluyendo los valores generados por un generador que esté asociado a una propiedad específica del objeto.

Aquí tienes un ejemplo de cómo usar for…in con un generador:

const objeto = {
  a: 'Hola',
  b: 'mundo',
  c: 'generador!',
  *generador() {
    for (const propiedad in this) {
      yield this[propiedad];
    }
  }
};

for (const valor of objeto.generador()) {
  console.log(valor); // Imprime 'Hola', 'mundo', 'generador!'
}

En este ejemplo, creamos un objeto objeto que tiene tres propiedades (a, b y c). Además, el objeto tiene un método generador llamado generador() que utiliza un bucle for…in para iterar sobre las propiedades del objeto y generar los valores correspondientes.

Luego, utilizamos el bucle for…of para iterar sobre los valores generados por objeto.generador() e imprimir cada valor en la consola.

Este tema es un poco mas avanzado por lo que requiere una explicación completa o ampliada.

📑 DOC.

Conf.
🇬🇧 EN

Exp.
🇬🇧 EN
🇪🇸 ES

Este tema de los generadores tiene mucho por sacar :0

chicos si les cuesta mucho entenderlo de cero aqui, les dejo este video de midu que vi en youtube.
https://www.youtube.com/watch?v=wl6X2XFnNtY

Aporto Tablita de diferencias

Mi resumen:

15/35 ES6: generator

Los generadores son funciones especiales que pueden pausar su ejecución, recordar su contexto y luego continuar se ejecución desde donde se quedaron. Son útiles para generar una cantidad infinita de valores a través de una función matemática y ocupan poca memoria en comparación con otros métodos para almacenar una gran cantidad de valores. Los generadores se definen utilizando la palabra clave function* seguida de yield, que devuelve un valor cada vez que se llama a la función y recuerda el valor interior. También se pueden utilizar ciclos repetitivos como for of y for in para iterar a través de los valores de un generador o un iterable. Por ejemplo:

/function* generator () {

yield 1
yield 2
yield 3
}

const generator = generator()

console.log(generator.next().value) //1
console.log(generator.next().value) //2
console.log(generator.next().value) //3

console.log(generator.next()) //{value:undefined, done: true}

const array = [5, 4, 3, 2, 1]

for (let numero of array) {
	console.log(numero) // 5 4 3 2 1
}

const objeto = {a: 1, b: 2, c: 3}

for (let elemento in objeto) {
	console.log(elemento) // 'a' 'b' 'c'
}

for (let elemento in array) {
	console.log(elemento) // '0' '1' '2' '3' '4'
}

👎🏼

Aqui les dejo un enlace a un video en donde hablan mas sobre las funciones generadores y como crear una estructura fibonaci con un generador. Este video es del canal midulive, se los recomiendo para ver mas cosas de programacion. Espero que les sea util 😃.

genial!

Algo muy interesante que pueden aplicar aquí, aunque es un tema que se entiende más al hablar de Closures, es el Entorno Léxico.
Les recomiendo mucho buscar información sobre este tema para que entiendan como funciona JavaScript

Le dejo un link con algo de info:

Aquí un ejemplo en código:

function* iterate(array)  {
    for (let value of array) {
        yield value;
    }
}

const it = iterate(["Oscar", "Alexa", "David", "Gerlis"]);
const it2 = iterate(["Perro", "Gato", "Ave", "Hamster", "Pollo"]);
console.log(it.next().value);
console.log(it2.next().value);
console.log(it.next().value);
console.log(it2.next().value);
console.log(it.next().value);
console.log(it2.next().value);
console.log(it.next().value);
console.log(it2.next().value);
console.log(it.next().value);
console.log(it.next().value);

console.log(it2.next().value);
console.log(it2.next().value);

El asterisco después de la palabra function es para definir la función como un generator, si se lo quitamos, nos va a dar un error.

Para complementar la clase y la expiación en los recursos vi este video donde hacen la serie fibonacci con un generator.

function* fibonacci() {
  // 0 1 1 2 3 5 8 13 ...
  let first = 0;
  let second = 1;

  yield first;
  yield second;

  while (true) {
    const sum = first + second;
    yield sum;

    first = second;
    second = sum;
  }
}

const fib = fibonacci()
console.log(fib.next().value);
console.log(fib.next().value);
console.log(fib.next().value);
console.log(fib.next().value);
console.log(fib.next().value);
console.log(fib.next().value);
console.log(fib.next().value);
console.log(fib.next().value);

Esto es muy similar a Python

Unos pequeños experimentos:

function* iterate(array) {
    for (let value of array) {
        yield value;
    }
}

const it = iterate(['Oscar','David','Ana','Jenny']);
console.log(it.next().value);
console.log(it.value);
console.log(it.next());
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next());
console.log(it);