Iterables y Iterators

1.1 Conceptos básicos

Los iteradores y los objetos iterables en JavaScript son conceptos fundamentales que permiten que los objetos sean recorribles. Estos conceptos son ampliamente utilizados en el JavaScript moderno, especialmente en estructuras como los bucles for...of, el operador de propagación (spread operator), la desestructuración y muchos otros. En esta lección vamos a ver qué son los iterables y los iterators, cómo funcionan y cómo crearlos y utilizarlos.

Iterables (Objetos iterables)

Los objetos iterables son aquellos que implementan el protocolo de iteración. Deben tener un método especial con la clave [Symbol.iterator], que devuelve un objeto iterator.

Iterators (Iteradores)

Un iterador es un objeto con un método next() que devuelve un objeto con dos propiedades:

• value — el valor del siguiente elemento de la secuencia
• done — un valor booleano que indica si la secuencia ha terminado (true) o no (false)

Veamos algunos ejemplos de uso.

Objetos iterables integrados

JavaScript tiene varios objetos iterables integrados, incluidos arrays, strings, objetos Set y Map.

Ejemplo 1: Iterando un array

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

      for (const item of array) {
        console.log(item);
      }

      // Mostrará: 1 2 3 4 5
    
  

Ejemplo 2: Iterando una cadena

    
      const string = 'hello';

      for (const char of string) {
        console.log(char);
      }

      // Mostrará: h e l l o
    
  

1.2 Creación de tus propios iterators

Puedes crear tu propio iterador implementando el protocolo de iteración: creando un método next().

Ejemplo 1: Creación de un iterador

    
      function createIterator(array) {
        let index = 0;

        return {
          next: function() {
            if (index < array.length) {
              return { value: array[index++], done: false };
            } else {
              return { done: true };
            }
          }
        };
      }

      const myIterator = createIterator([1, 2, 3]);

      console.log(myIterator.next()); // { value: 1, done: false }
      console.log(myIterator.next()); // { value: 2, done: false }
      console.log(myIterator.next()); // { value: 3, done: false }
      console.log(myIterator.next()); // { done: true }
    
  

Creación de objetos iterables

Para que un objeto sea iterable, debe implementar el método [Symbol.iterator]. Sí, es un nombre un poco peculiar. Aquí te muestro cómo crearlo.

Ejemplo 2: Creación de un objeto iterable

    
      const myIterable = {
        *[Symbol.iterator]() {
          yield 1;
          yield 2;
          yield 3;
        }
      };

      for (const value of myIterable) {
        console.log(value);
      }

      // Mostrará: 1 2 3
    
  

1.3 Métodos integrados

Veamos algunos métodos y operadores integrados para trabajar con objetos iterables.

Ejemplo 1: Operador spread

El operador spread (...) se puede usar para copiar o combinar objetos iterables.

    
      const array = [1, 2, 3];
      const newArray = [...array, 4, 5, 6];

      console.log(newArray); // Mostrará: [1, 2, 3, 4, 5, 6]
    
  

Ejemplo 2: Desestructuración

La desestructuración permite extraer valores de objetos iterables.

    
      const [first, second, third] = [1, 2, 3];

      console.log(first);  // Mostrará: 1
      console.log(second); // Mostrará: 2
      console.log(third);  // Mostrará: 3
    
  

Ejemplo 3: Métodos Array.from y Array.of

El método Array.from() permite crear un array a partir de un objeto iterable.

    
      const set = new Set([1, 2, 3, 4, 5]);
      const array = Array.from(set);

      console.log(array); // Mostrará: [1, 2, 3, 4, 5]