Generadores en JavaScript

Clase 37 de 51 • Fundamentos de JavaScript 2017

Resumen

Para decirle a JavaScript que nuestra función es un generador debemos indicarlo con un asterisco de la siguiente forma:

function(asterisco)

Si creamos un generador debemos colocar la palabra clave yield la cual indica que cuando llamemos la función después de la primera vez, esta iniciará en la línea después de yield.

David Santiago González Ramos

student•

Les comparto algo de documentación sobre los generadores:

Nico Figueroa

student•

Hola, con las cosas que he estado aprendiendo durante el curso me anime a desarrollar un Drag and Drop para desktop, con class

Quería saber que les parece y que tipo de observaciones tienen.

además con lo aprendido de memorización como se podría recordar el primer movimiento y saber si voy a la derecha o a la izquierda
Saludos !!

Martin E Pestana R

student•

Muy buena la herramienta jsfiddle, gracias por el aporte, me servirá de mucho.

Iván Darío Sánchez Jiménez

student•

Excelente ejercicio. Me puse a investigar sobre el parametro “eve” que le pasa en la función del evento que esta escuchando y aprendí que cuando un evento ocurre este pasa un objeto como primer parámetro. Gracias, no lo sabía hasta ahora

Platzi Team

student•

Otra vez el código del video que presenta Sacha…

// ----- FORMA 2 ----------//

function* fibonacci(){
	let a=0, b=1
	//yield a - hace que la siguiente vez que se ejecute 
	// la función continue en la siguiente linea.
	
	while (true) {
		let f= a
		a = b
		b = f + a
		let reset = yield f
		if(reset) a=0, b=1
	}
}

const fibo = fibonacci()
// Comandos para la ejecución en la consola
fibo 
fibo.next()
fibo.next(reset)

Andrés Madrigal

student•

fibo.next(true)*

Yadiel Vélez

student•

Para los que tuvieron la misma duda que yo, sí “next()” y “done” ya vienen incluídas dentro de lo que es el prototipo “Generator”. Documentación:

Fco Castro

student•

De allí traigo esto que nos pone en situación:

function* gen() { 
  yield 1;
  yield 2;
  yield 3;
}

var g = gen(); // "Generator { }"
g.next();      // "Object { value: 1, done: false }"
g.next();      // "Object { value: 2, done: false }"
g.next();      // "Object { value: 3, done: false }"
g.next();      // "Object { value: undefined, done: true }"

Alfonso Jiménez Ruz

student•

En el siguiente enlace se explica perfectamente el concepto de generador y se aportan multitud de ejemplos.

Camila Di Virgilio

student•

excelente aporte 😄

Juan Diego Silva Garcia

student•

Buen aporte!

Hamilton Zambrano

student•

Aquí explican claramente los generadores

Alexis Antonio Moraga Gallardo

student•

Buenas. Les comparto mi repositorio en GitHub con el avance del curso

Repositorio

En en están

/*Los generadores en javascript nos permiten crear un punto de quiebre
en el cual nustra funcion se detendra, yen la siguiente llamada se ejecutara desde
la linea en la que se detuvo */

function* fibonacci(){
  //usamos el * para definir que esta funcion es un generador
  let a= 0, b = 1//asignamos los valores iniciales para fibonacci

  while(true){//creamos un while infinito
    let f = a//asignamos  a f  el valor de a
    a = b//asignamos a a el valor de b
    b = f + a//asignamos a b el valor de f + a
    let reset =yield f//usamos yield como punto de quiebre, esto obliga a la funcion a retornar f
    //establecemos una variable para resetear el clousure y le asignamos el valor de yield
    if (reset) a = 0, b= 1
  }
}

 const fibo = fibonacci()//llamamos a la funcion, que al ser un generador es enrrealidad un objeto
fibo.next().value//accedenos a la funcion next del objeto generador y a su propiedad value que nos
//retorna el valor entregado por yield
//si llamamos nuevamente a la funcion esta se comenzara a ajecutar justo despues de yield, con lo cual
//recordando su clousure entrara nuevamente al while y nos retornara yield, deteniendo nuevamente el while
//hasta la proxima llamda

fibo.next(true)
//yield puede resivir un parametro, el cual es asignamo a la variable reset, con lo cual, si reset es true
//entramos al if y reseteamos los valores a los iniciales
/*
Con los generadores pasa algo similar a el metodo async await

usamos * para declarar una funcion e tipo generador , y esto nos da acceso a la palabra
reservada yield, la cual nos permite crear un punto de quiebre como un return.
pero adicionalmente a esto nos permite continuar la ejecucion desde ese punto esacto la proxima vez que llamemos
a la funcion, ademas la funcion recordara el clousure

este objeto tiene las mismas propiedades que los iteradores que vimos en la clase anterior ,
con lo cual accederemos a la funcion que esta en la propiedad dext, y a su propiedad value
*/

los ejercicios realizados en clase comentados junto a mis notas personales

Francisco Benitez

student•

Entendí que para que sea iterable era necesario agregarle la propiedad [Symbol.iterator] a la variable que recibe el objeto. Pero al parecer unicamente sirve para utilizarla en el for (value of), pero no me deja resear con fibo.next(true) porque no me reconoce next como una funcion. Sin embargo cuando la declaro como Sacha hace en este video, igualandola a fibonacci() sin agregar la propiedad Symbol.iterator me toma el reset. La pregunta es: ¿cómo puedo resetear el valor cuando preparé la variable fibo para ser iterada con for? ¿Hay algo que no entendí? Gracias

Luis Felipe Cardona Florez

student•

se puede deducir que el yield actua como si fuera un acumulador ?

Iván Darío Sánchez Jiménez

student•

Mas bien como un return

David Fernandez Martin

student•

Una duda que tengo. La instrucción yield hace que la próxima vez que se ejecute el generador continuará por la siguiente linea después de yield. Pero, no entiendo muy bien porque hay que poner a continuación de yield la variable f. Si alguien me lo puede aclarar lo agradecería.

Alexis Antonio Moraga Gallardo

student•

lo que pasas después de yield es lo que se retorna
en este caso retornamos f que contiene el valor de fibonacci que estamos calculando.

puedes ver a yield como un return que recuerda donde quedo para continuar la próxima vez

Alexis Antonio Moraga Gallardo

student•

este valor es el que luego se aplica a la propiedad valué del objeto

Nicolas Ticona Valdivia

student•

function Persona( nombre, edad ){
    this.nombre = nombre
    this.edad = edad;
    this.tiempo = 0;
}

Persona.prototype.cumpleañosNext = function* (){
    while(true){
        this.tiempo++
        this.edad++;
        yield `En ${this.tiempo} años tendras ${this.edad}` 
    }
}

nicolas = new Persona('Nicolas', 16)
console.log(nicolas.cumpleañosNext().next().value)

Julio J Yépez

student•

Entonces en el video anterior la lógica de Iteradores es practicamente un polyfill de los generadores?

Francisco Jose

student•

HOIa a mi no me queda claro la última parte en donde iguala la variable reset al yield y luego con esa variable hace un condicional. Lo que no entiendo es como puede funcionar eso cuando ponemos fibo.next(next)

Josue Anthony Facundo Chumacero

student•

por q next es en condicional es true!

Alexis Antonio Moraga Gallardo

student•

de lo que yo logre entender yield nos retorna el valor de f, pero yield no tiene el valor de f.

junto a esto sasha explica que yield puede recibir un parámetro, con lo cual deduzco que mientras no le enviemos nada yield esta vacio, por lo cual es false, y que cuando le asignamos un valor, sea cual sea este pasa a true, por que dejo de estar vació.

es por esto que no importa que valor o parámetro le pases, siempre que le pases algo este marcara true.

espero haberme explicado.
Saludos

Ramiro Andres Videla

student•

tengo una consulta, entonces la propiedad de la funcion “next” no tiene que estar implicita en la funcion?? porque no lo crea como propiedad del objeto ni genera un valor que reciba por parametro el booleano para resetear la funcion
no me quedo muy claro

Alexis Antonio Moraga Gallardo

student•

según entendí, al usar * transformas la función en un objeto de tipo generador, el cual en su prototipo ya trae estas propiedades, por lo que no necesitamos declararlas

no genera una función para resetear, ya que yield puede recibir un parámetro, y este lo asigna a la variable reset.

me explico, si a yield no le pasamos un parámetro reset esta vacía, con lo cual es false. en cambio, si a yield le pasamos un parámetro reset deja de estar vacía, por lo cual pasa a ser true

espero haberme explicado bien.
Saludos

Luis Gutiérrez

student•

Básicamente se podría decir que yield ejecuta tu función por partes, permitiendo ejecutar código entre una parte y otra, es por eso que utiliza el ciclo while (true) que le permite sumar.

		function* ejemplo () {
			console.log('ejecutado')

			yield console.log('a')

			console.log('ejecutado x 2')

			yield console.log('b')

			yield console.log('c')

			yield console.log('d')

			yield console.log('e')
		}

		let z = ejemplo()
		z.next()
		z.next()
		z.next()

Alexis Antonio Moraga Gallardo

student•

podríamos decir que si, el problema es que si solo ejecutas un llamado a la función esta solo se ejecutara hasta donde esta el yield. para terminar de ejecutar el resto de la función necesitas realizar un segundo llamado a la misma

Edgar Moises Valdez Faria

student•

Hola, está bien explicado, pero hay algo que no me quedó claro

Por lo que entedí “yield f” devuelve el valor del primer parámetro pasado a la funcion next del generador, gracias a esto Sacha pudo hacer lo siguiente:

let reset = yield f //Devuelve el primer parámetro de la función next, ej: iterator.next(true);
if(reset) a=0, b=1;

Antes de explicar esto pensé que yield era como un return, es decir, el código se ejecutaba hasta llegar a yield (lo que esta debajo de este ya no se ejecuta), pero con lo del reset me di cuenta que no es así. Y de ahí mi pregunta.

¿Como sabe JS hasta que linea de código llegar sin iterar el while?

Espero se entienda mi pregunta y se agradece la ayuda.

Hector Vasquez

student•

Lo que tengo entendido, el yield efectivamente funciona como un return. Esa línea, además de hacer return, le asigna el valor a reset.

Al volver a ejecutar next, continúa desde ahí, manteniendo el valor que tenía reset, a y b y continúa con la siguiente iteración del while.

Te referías a eso?

adrian Ortiga

student•

Si pones un console.log antes y después del yield entiendes por donde va el programa, que básicamente la función empieza a ejecutarse en la linea del yield y sigue con el bucle hasta que vuelve a encontrar el yield.

function* fibonacci() {
  let a = 0, b = 1
  
  while (true) 
  {
    let f = a
    a = b
    b = f + b
    console.log('antes del yield ',a,b,f)
    let reset = yield f
    console.log('después del yield ',a,b,f,reset)
    if (reset) a = 0, b = 1
    
  }
}

Noé Muñoz

student•

La verdad es que no he podido comprender bien, mientras mas avanzamos, más difícil se vuelve todo,

Simón Ottoniel González Acosta

student•

Que super pro el curso sacha, que increibles son los iteradores y generadores! 😄

Luis Felipe Silgado Cortázar

student•

acabo de caer en cuenta, para que sirve ese done?

Yeison Daza

student•

Para definir que ya termina el generador

Mauricio Hernan Cabrera

student•

No se subieron los archivos de este video

Diego Forero

Team Platzi•

Todo se trabajo en consola, son ejercicios cortos, el ideal es que escribas el código para mejorar la comprensión de los conceptos y entender el porque de las cosas.

// ----- FORMA 2 ----------//

function* fibonacci(){
	let a=0, b=1
	//yield a - hace que la siguiente vez que se ejecute 
	// la función continue en la siguiente linea.
	
	while (true) {
		let f= a
		a = b
		b = f + a
		let reset = yield f
		if(reset) a=0, b=1
	}
}

const fibo = fibonacci()
// Comandos para la ejecución en la consola
fibo 
fibo.next()
fibo.next(reset)

function* gen() { 
  yield 1;
  yield 2;
  yield 3;
}

var g = gen(); // "Generator { }"
g.next();      // "Object { value: 1, done: false }"
g.next();      // "Object { value: 2, done: false }"
g.next();      // "Object { value: 3, done: false }"
g.next();      // "Object { value: undefined, done: true }"

/*Los generadores en javascript nos permiten crear un punto de quiebre
en el cual nustra funcion se detendra, yen la siguiente llamada se ejecutara desde
la linea en la que se detuvo */

function* fibonacci(){
  //usamos el * para definir que esta funcion es un generador
  let a= 0, b = 1//asignamos los valores iniciales para fibonacci

  while(true){//creamos un while infinito
    let f = a//asignamos  a f  el valor de a
    a = b//asignamos a a el valor de b
    b = f + a//asignamos a b el valor de f + a
    let reset =yield f//usamos yield como punto de quiebre, esto obliga a la funcion a retornar f
    //establecemos una variable para resetear el clousure y le asignamos el valor de yield
    if (reset) a = 0, b= 1
  }
}

 const fibo = fibonacci()//llamamos a la funcion, que al ser un generador es enrrealidad un objeto
fibo.next().value//accedenos a la funcion next del objeto generador y a su propiedad value que nos
//retorna el valor entregado por yield
//si llamamos nuevamente a la funcion esta se comenzara a ajecutar justo despues de yield, con lo cual
//recordando su clousure entrara nuevamente al while y nos retornara yield, deteniendo nuevamente el while
//hasta la proxima llamda

fibo.next(true)
//yield puede resivir un parametro, el cual es asignamo a la variable reset, con lo cual, si reset es true
//entramos al if y reseteamos los valores a los iniciales
/*
Con los generadores pasa algo similar a el metodo async await

usamos * para declarar una funcion e tipo generador , y esto nos da acceso a la palabra
reservada yield, la cual nos permite crear un punto de quiebre como un return.
pero adicionalmente a esto nos permite continuar la ejecucion desde ese punto esacto la proxima vez que llamemos
a la funcion, ademas la funcion recordara el clousure

este objeto tiene las mismas propiedades que los iteradores que vimos en la clase anterior ,
con lo cual accederemos a la funcion que esta en la propiedad dext, y a su propiedad value
*/

function Persona( nombre, edad ){
    this.nombre = nombre
    this.edad = edad;
    this.tiempo = 0;
}

Persona.prototype.cumpleañosNext = function* (){
    while(true){
        this.tiempo++
        this.edad++;
        yield `En ${this.tiempo} años tendras ${this.edad}` 
    }
}

nicolas = new Persona('Nicolas', 16)
console.log(nicolas.cumpleañosNext().next().value)

		function* ejemplo () {
			console.log('ejecutado')

			yield console.log('a')

			console.log('ejecutado x 2')

			yield console.log('b')

			yield console.log('c')

			yield console.log('d')

			yield console.log('e')
		}

		let z = ejemplo()
		z.next()
		z.next()
		z.next()

function* fibonacci() {
  let a = 0, b = 1
  
  while (true) 
  {
    let f = a
    a = b
    b = f + b
    console.log('antes del yield ',a,b,f)
    let reset = yield f
    console.log('después del yield ',a,b,f,reset)
    if (reset) a = 0, b = 1
    
  }
}

Generadores en JavaScript

Estamos renovando el Curso de Fundamentos de Javascript

¿Dónde aprender JS actualizado?

Bases del lenguaje

Bienvenido al curso

Calcula el área de un triángulo. Creando funciones

¿Quiénes pueden pasar a ver una película? Ejercicio con condicionales, expresiones y booleanos

Inventar un idioma manipulando strings

¿Cuántos kms corre una persona en promedio? Entendiendo el ciclo for

¿Quién gana en una pelea: Gokú o Superman? Resolviendo este problema con ciclos while

¿Cuánto tiempo pasó desde tu fecha de nacimiento?

Objetos en JavaScript

Calcular la distancia entre dos puntos - Objetos en JavaScript

Agrega métodos para mover los puntos - Objetos Avanzado en JavaScript

Definiendo la clase Punto - Prototipos en JavaScript

Definiendo la clase Punto - Object.create en JavaScript

Definiendo la clase Punto - Class en JavaScript

Conocimientos intermedios

Entiende el scope de las variables

Operaciones con arrays

Entiende los closures de JavaScript

Estructura del lenguaje

¿Quién es this?

This, _this y los arrow functions

La función bind

call y apply

ECMAScript 5, 2015, 2016, Babel y otros cuentos

ECMAScript: El estándar en el que se basa JavaScript

Babel al rescate: logrando la compatibilidad buscada

Distintas formas de escribir módulos en JavaScript

Procesos asíncronos

No generes un cuello de botella en el EventLoop

Los callbacks de JavaScript

Callback a un servidor externo

Promesas

Async-await

Implementación de set timeout en JavaScript

Implementación de set interval en JavaScript

Cancelando el Timeout y el Timeinterval

Qué son y cómo se implementan el callbacks en JavaScript

Eliminando el callback hell usando promesas en JavaScript

Estructuras de datos y funciones avanzadas

Funciones Recursivas

Memoizacion

Iteradores en JavaScript

Generadores en JavaScript

Estructuras de Datos Inmutables en JavaScript

Creando un paquete para NPM

Requisitos Técnicos

Creando nuestro paquete

Escribiendo el código de nuestro paquete

Testeando el paquete

Publicando el paquete en NPM

Juego de HTML

¿Qué vamos a construir?

Inicializando el juego

A una ronda le sigue otra ronda

Añadir una librería

Cierre del Curso

Desafíos

Crear un modulo para convertir medidas de peso

Crear un juego en HTML, tic tac toe

Crear un tutorial