Iteradores en JavaScript

Clase 36 de 51 • Fundamentos de JavaScript 2017

Contenido del curso

Estamos renovando el Curso de Fundamentos de Javascript

1
¿Dónde aprender JS actualizado?
00:13 min

Bases del lenguaje

Objetos en JavaScript

Conocimientos intermedios

¿Quién es this?

ECMAScript 5, 2015, 2016, Babel y otros cuentos

Procesos asíncronos

Estructuras de datos y funciones avanzadas

Creando un paquete para NPM

Juego de HTML

Desafíos

Tomar examen

Resumen

Solucionaremos el problema de Fibonacci con Iteradores

Los iteradores nos permitirán hacer listas infinitas de elementos haciéndolos distintos a los arreglos (arrays) los cuales tienen un numero finito de elementos definidos

Para los iteradores podemos obtener lo siguiente:

next() - iterará los datos
value - nos devolverá el valor del dato
done - será un indicador para cuando la lista se haya terminado

Con iteradores es muy sencillo realizar un for y obtener los datos.

for(let value of fibo) { console.log(value) }

Comentarios

Platzi Team

student•

Código del Sacha,

//---------- FORMA 1 -----------------------//
function fibonacci(){
	let a=0, b=1
	//Closure
	return{
		next: function() {
		 let f= a
		 a = b
		 b = f + a
		 return{ value: f, done: false}
		}
	}
}

const fibo = fibonacci()

fibo.next().value

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

function fibonacci(){
	let a=0, b=1
	//Closure
	return{
		next: function() {
		 let f= a
		 a = b
		 b = f + a
		 return{ value: f, done: false}
		}
	}
}

const fibo = {}
fibo[Symbol.iterator] = fibonacci 

let i=0
for (let value of fibo) {
	console.log(value)
	i++
	if(i>20) break
}```

Wilmer Ariel Moina Rivera

student•

Para calcular correctamente el valor de la serie de Fibonacci hay inicializar el valor de la variable i en 1, ya que al inicializar en 0 realiza un proceso más en el for .

Nicolás Antonio Brusquetti Vargas

student•

jajaja like si te reiste del gesto que hizo Sacha

Alexander Chinea

student•

literalmente me exploto el cerebro con todo lo que dijo

Jesus Sandrea

student•

Ahhhh esto fue como un chiste malo, lo entendí media hora después. jejeje

Emmanuel Rangel Jiménez

student•

Complementa esta clase Aquí

Victor Alfonso Caballero Cabrera

student•

wow!! ni idea que existía esto , esta bueno.

Juan Pablo Albarán Gallego

student•

Parce, no se si solo soy yo pero a este man no se le entiende nada. Se nota que sabe mucho pero no se hace entender…

Alexis Antonio Moraga Gallardo

student•

Buenas les comparto mi repositorio en GitHub con el avance del curso

Repositorio

En en estan los ejercicios realizados en clase acompañados de mis notas personales

/*en esta clase veremos como crear listas infinitas con javascript usando iteradores
para ejemplificar esto continuaremos con el ejemplo de fibonacci, pero en esta ocacion
por cada llamamo que realicemos a la funcion esta nos retornara el numero de fibonnacci
siguiente
*/


function fibonacci(){//creamos la funcion
  let a = 0, b = 1; //establecemos las variables con los numeros iniciales de fibonacci
  return {//retornamos un objeto con una propiedad next
    next: function(){
      let f = a //guardamos el valor de a en una variable auxiliar para mantenerlo

      a = b //asignamos el valor de la variable b a la variable a

      b = f + a //asignamos a la variable b el valor de f, que almacena el valor anterior de a
      // + el valor actual de a que es el valor anterior de b con lo cual nos queda
      return {value: f, done:false}
      /*primer ciclo
        a = 0
        f = a
        a = b
        a = 1

        b = f + a
        b = 1

        segundo ciclo
        a = 1//recordar que a toma el valor de b en el ciclo anterior, por lo que vale 1
        f = a
        a = b// en el cliclo anterior b era igual a a que valia 1 y f que valia 0 por lo que continua valiendo 1
        a = 1

        b = f + a
        b = 2 //como a traia el valor de 1 desde el cliclo anterior lo traspasa a f la cual queda en 1
              luego a toma el valor de b que es 1 , con lo cual b = a la suma de 1+1

        tercer ciclo
        a = 1
        f = a
        a = b
        a = 2

        b = f + a //en este ciclo f vale 1, que es el valor que a traia del cilo anterior, y a toma el valor de b
        //el cual traia el valor 2 del ciclo anterior con lo cual b seria igual a 1+2
        b = 3

        cuarto cliclo
        a = 2
        f = a
        a = b
        a = 3

        b = f + a
        b = 5
        de esta forma se calcula la secuencia de fibonacci
      */

    }
  }
}

const fibo = fibonacci()//asignamos a la constante fibo el valor de la funcion fibonacci
fibo.next().value

/*================================ iterando los primeros 20 numeros==========================*/
const fibo2 = {}//creamos un objeto vacio
fibo[Symbol.iterator] = fibonacci
//en javascript usamos los corchetes para acceder a las propiedades de los objetos, en este caso
//estamos accediendo a una propiedad llamada Symbol.iterator, de este objeto vacio, esta es una propiedad de javascript
//la cual nos permite iterar la funcion que enviamos

let i = 0//creamos una variable para contador
for(let value of fibo){
  //cuando usamos un for of lo hacemos para iterar sobre las propiedades de un objeto
  console.log(value)
  i++ //aumentamos el contador
  if(i > 20) break //creamos un caso de break, para no crear una iteracion infinita
  //cuando el contador i llege a 20 se terminara la iteracion a la funcion
}

Jersson Mendoza Linares

student•

¿cual sería recomendable los iteradores o la memoización ? ¿porque?

Diego Forero

Team Platzi•

Eso depende del caso de uso, si tu sabes la cantidad de items de tu array puedes usar memoizacion, pero si por el contrario no conoces el tamaño de los datos que te llegan y que pueden variar cada vez, es mejor usar iteradores.

Andrés Madrigal

student•

Como por ejemplo la lista de cursos enumerada en vertical al lado izquierdo de la pagina, eso usa iteradores?

Adonis Perez Perez Farias

student•

tengo una duda, cual es la diferencia de asignar a una variable o a una propiedad de un objeto un metodo con su argumento o sin el, me refiero al ()
const fibo = {}
fibo[Symbol.iterator] = fibonacci , este es un caso
este es el otro
const fibo = fibonacci(), cual es la diferencia?

Fco Castro

student•

Yo ando también perdido con eso

Alexis Antonio Moraga Gallardo

student•

según lo que yo entendí en el primer caso creas un objeto vació.
en este objeto accedes a una propiedad de javascript (Symbol.iterator) y a esta propiedad le asignas como valor la función que quieres iterar, y es mediante esta propiedad que puedes iterar la el objeto, que a su vez contiene la función
(ojo que esta no es una propiedad que tu definas en un objeto, sino que es de javascript)

en e segundo caso asignas directamente el valor de una función a una variable

Daniel Felipe Contreras López

student•

Para mi aporte use class, visto en la clase 13, para hacerlo de una forma distinta, pero su funcionamiento es el mismo

class fibonacci {
  constructor() {
    this.a = 0;
    this.b = 1;
  }
  next() {
    const f = this.a;
    [this.a, this.b] = [this.b, this.b + this.a];
    return { value: f, done: false };
  }
}
const fibbo = new fibonacci();
console.log(fibbo.next().value);

nota : no logre hacerlo iterar en un for de esta manera

Jose Enrique Marquez

student•

Deberían corregir ese detalle que el ultimo resultado que muestra es del numero 21, o por lo menos en el video comentar el porque sucede.

Esto pasa ya que tiene el inicializador en 0 y como 20 > 20 es igual a false
da la oportunidad de calcular el fibonacci de 21

David Toca

student•

Gracias por notificarnos, lo vamos a revisar

Nico Figueroa

student•

Hola buenas, una pregunta
Siempre tengo que usar las palabras next,value y done? Por que ?

Saludos!!

Diego Forero

Team Platzi•

Hola, si siempre se tiene que usar, es como esta definido los iteradores, es como preguntar porque se declaran funciones usando la palabra function.

Puedes ver más información de los iteradores y generadores aquí

Nico Figueroa

student•

Gracias!!! 🖒

Juan Sebastián Angarita

student•

Hola a todos, despues de un largo rato ya entiendo como funcionan los iteradores, pero todavia tengo una duda.
cual es la ventaja de usar iteradores? hay algun tipo de ejercicio que no se pueda hacer sin iteradores?
mis preguntas son porque al tratar hacer el ejercicio sin iteradores me parecio mucho mas sencillo y facil de leer.

Andrés Madrigal

student•

Crear listas infinitas con estos iteradores es un buen ejemplo, hacer scrollhell

LUIS DANIEL VAZQUEZ SERVIN

student•

Hola
Alguien me podría decir que clase de iteradores se usan aquí

Diego Forero

Team Platzi•

No entiendo tu pregunta, solo hay un tipo de iterador y permite crear listas de datos infinitas.

Gianfranco Correa

student•

aqui otra forma de resolverlo asignando el symbol.iterator dentro de fibonacci y sin usar una tercera variable para almacenar

let fibonacci = {
	[Symbol.iterator]() {
		let a = 0, b = 1
		return {
			next() {
				[a, b] = [b, a + b]
				return {done: false, value: b}
				}
			}
		}
	}
for (let valor of fibonacci) {
	if(valor > 1000) break
	console.log(valor)
}

en este caso el for utiliza el mismo valor para hacer el break (cuando el valor de fibonacci sea mayor a 1000 hace el break)
la logica de [a, b] = [b, a + b] es muy simple
"a" toma el valor de “b”, y “b” el de “a + b”, si hacen una tabla se entiende mejor:

Daniel Alejandro Contreras Suárez

student•

Muy interesante esa manera de asignar valores a ‘‘a’’ y ‘‘b’’, pero de estas manera estas perdiendo los primeros dos valores de la serie de fibonacci. Si pides los primeros 5 te va a devolver 1,2,3,5,8 cuando debería devolverte 0,1,1,2,3.
SI te fijas en el código de Sacha, el cambia los valores de ‘‘a’’ y ‘‘b’’ para los próximos números, pero el valor que le asigna a value es la variable ‘‘f’’

Gianfranco Correa

student•

Lo sé, pero sigue siendo otra forma valida, hay gente que el primer 0 y 1 no lo cuentan, ya que es parte de las reglas de fibonacci, de todas formas si buscas que aparezcan esos dos, no es difícil, ese mismo ejemplo usé en una entrevista de trabajo hace un mes, y me lo tomaron como bien 😛

Johan Alejandro Lopez Arias Alejandro Lopez Arias

student•

for…of, explicación

Fco Castro

student•

Me sumo a @adonisperez23 . No termino de entender por qué ocurre

const fibo = {}
fibo[Symbol.iterator] = fibonacci
//
// por qué no se llama así?:
//
// fibo[Symbol.iterator] = fibonacci()
//
// NO COMPRENDO por qué hay que quitarle los , () ,.

Alexander Chinea

student•

Porque lo que se quiere es asignar la función, no asignar el resultado de la funcion!, al usar los parentesis la funcion se ejecuta en cambion sin usarlos podemos prácticamente clonar la funcion

function suma(){
return 1+1
}

const resultado = suma() // resultado = 2
const sumaApodo = suma //  sumaApodo = function (){ return 1+1} 
const resultado2 = sumaApodo() // resultado2 = 2

Fernando Barahona

student•

Lo siento pero no entendi nada.
Osea en la primera version el objeto fibo (objeto creado al llamar la funcion fibonacci que devuelve un objeto que contiene una funcion next) que contiene una funcion next. Al a llamar a fibo.next() nos devuelve un objeto con los atributos value y done.

Ahora con el segundo metodo que??? fibo tiene un nombre con valor sacha y por ultimo tiene un valor atributo Symbol.iterator que contiene la funcion next? alguien me explica, por fa

Iván Toro

student•

El patron de diseño iterador.

Francisco Javier Rodriguez Gomez

student•

Iterador con límite superior

Para terminar el ciclo mediante el iterador podemos retornar: {value: undefined, done: true}

Este es el código completo:

// Giving an upper limit to the iterator //
function fibonacci(){
	let a=0, b=1, limit=0
	//Closure
    return {
        next: () => {
            // terminate when limit equals 20
            if (limit++ == 20) return {value: undefined, done: true}
            const f = a
            a = b
            b += f 
            return {value: f, done: false}
		}
	}
}

const fibo = [] // it works with {} too
fibo[Symbol.iterator] = fibonacci 

for (let value of fibo) {
	console.log(value)
}

//---------- FORMA 1 -----------------------//
function fibonacci(){
	let a=0, b=1
	//Closure
	return{
		next: function() {
		 let f= a
		 a = b
		 b = f + a
		 return{ value: f, done: false}
		}
	}
}

const fibo = fibonacci()

fibo.next().value

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

function fibonacci(){
	let a=0, b=1
	//Closure
	return{
		next: function() {
		 let f= a
		 a = b
		 b = f + a
		 return{ value: f, done: false}
		}
	}
}

const fibo = {}
fibo[Symbol.iterator] = fibonacci 

let i=0
for (let value of fibo) {
	console.log(value)
	i++
	if(i>20) break
}```

/*en esta clase veremos como crear listas infinitas con javascript usando iteradores
para ejemplificar esto continuaremos con el ejemplo de fibonacci, pero en esta ocacion
por cada llamamo que realicemos a la funcion esta nos retornara el numero de fibonnacci
siguiente
*/


function fibonacci(){//creamos la funcion
  let a = 0, b = 1; //establecemos las variables con los numeros iniciales de fibonacci
  return {//retornamos un objeto con una propiedad next
    next: function(){
      let f = a //guardamos el valor de a en una variable auxiliar para mantenerlo

      a = b //asignamos el valor de la variable b a la variable a

      b = f + a //asignamos a la variable b el valor de f, que almacena el valor anterior de a
      // + el valor actual de a que es el valor anterior de b con lo cual nos queda
      return {value: f, done:false}
      /*primer ciclo
        a = 0
        f = a
        a = b
        a = 1

        b = f + a
        b = 1

        segundo ciclo
        a = 1//recordar que a toma el valor de b en el ciclo anterior, por lo que vale 1
        f = a
        a = b// en el cliclo anterior b era igual a a que valia 1 y f que valia 0 por lo que continua valiendo 1
        a = 1

        b = f + a
        b = 2 //como a traia el valor de 1 desde el cliclo anterior lo traspasa a f la cual queda en 1
              luego a toma el valor de b que es 1 , con lo cual b = a la suma de 1+1

        tercer ciclo
        a = 1
        f = a
        a = b
        a = 2

        b = f + a //en este ciclo f vale 1, que es el valor que a traia del cilo anterior, y a toma el valor de b
        //el cual traia el valor 2 del ciclo anterior con lo cual b seria igual a 1+2
        b = 3

        cuarto cliclo
        a = 2
        f = a
        a = b
        a = 3

        b = f + a
        b = 5
        de esta forma se calcula la secuencia de fibonacci
      */

    }
  }
}

const fibo = fibonacci()//asignamos a la constante fibo el valor de la funcion fibonacci
fibo.next().value

/*================================ iterando los primeros 20 numeros==========================*/
const fibo2 = {}//creamos un objeto vacio
fibo[Symbol.iterator] = fibonacci
//en javascript usamos los corchetes para acceder a las propiedades de los objetos, en este caso
//estamos accediendo a una propiedad llamada Symbol.iterator, de este objeto vacio, esta es una propiedad de javascript
//la cual nos permite iterar la funcion que enviamos

let i = 0//creamos una variable para contador
for(let value of fibo){
  //cuando usamos un for of lo hacemos para iterar sobre las propiedades de un objeto
  console.log(value)
  i++ //aumentamos el contador
  if(i > 20) break //creamos un caso de break, para no crear una iteracion infinita
  //cuando el contador i llege a 20 se terminara la iteracion a la funcion
}

class fibonacci {
  constructor() {
    this.a = 0;
    this.b = 1;
  }
  next() {
    const f = this.a;
    [this.a, this.b] = [this.b, this.b + this.a];
    return { value: f, done: false };
  }
}
const fibbo = new fibonacci();
console.log(fibbo.next().value);

let fibonacci = {
	[Symbol.iterator]() {
		let a = 0, b = 1
		return {
			next() {
				[a, b] = [b, a + b]
				return {done: false, value: b}
				}
			}
		}
	}
for (let valor of fibonacci) {
	if(valor > 1000) break
	console.log(valor)
}

// Giving an upper limit to the iterator //
function fibonacci(){
	let a=0, b=1, limit=0
	//Closure
    return {
        next: () => {
            // terminate when limit equals 20
            if (limit++ == 20) return {value: undefined, done: true}
            const f = a
            a = b
            b += f 
            return {value: f, done: false}
		}
	}
}

const fibo = [] // it works with {} too
fibo[Symbol.iterator] = fibonacci 

for (let value of fibo) {
	console.log(value)
}

Iteradores 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