Generadores

Frontend SELF ES
Nivel 45 , Lección 1
Disponible

2.1 Sintaxis de los generadores

Los generadores en JavaScript son funciones especiales que permiten controlar la ejecución del código. Pueden pausar su ejecución y reanudarla más tarde, lo que los convierte en una herramienta poderosa para trabajar con código asíncrono, iteradores y otras tareas complejas.

Los generadores se definen usando la función function* (nota la estrella). Dentro de un generador se utiliza el operador yield para pausar la ejecución y devolver un valor.

Declaración de un generador:

JavaScript
    
      function* generatorFunction() {
        yield 1;
        yield 2;
        yield 3;
      }
    
  

Creación de un objeto generador

Llamar a un generador no ejecuta su cuerpo inmediatamente. En su lugar, devuelve un objeto generador, que se puede usar para iterar sobre los valores:

JavaScript
    
      const gen = generatorFunction();
    
  

2.2 Uso de generadores

Método next()

El método next() se usa para reanudar la ejecución del generador hasta el próximo operador yield. Devuelve un objeto con dos propiedades:

  • value: valor devuelto por el operador yield
  • done: valor booleano que indica si el generador ha terminado (true) o no (false)

Ejemplo de uso del método next():

JavaScript
    
      function* generatorFunction() {
        yield 1;
        yield 2;
        yield 3;
      }

      const gen = generatorFunction();

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

Iteración sobre un generador

Los generadores pueden usarse con el bucle for...of para iterar sobre los valores.

Ejemplo de iteración sobre un generador:

JavaScript
    
      function* generatorFunction() {
        yield 1;
        yield 2;
        yield 3;
      }

      const gen = generatorFunction();

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

      // Mostrará: 1
      // Mostrará: 2
      // Mostrará: 3
    
  

Ejemplo de devolver valores

Los generadores pueden devolver un valor usando el operador return:

JavaScript
    
      function* generatorFunction() {
        yield 1;
        yield 2;
        return 3;
        yield 4; // Este yield nunca se ejecutará
      }

      const gen = generatorFunction();

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

2.3 Uso avanzado de generadores

Interacción con el generador

El método next() puede recibir un argumento que se pasa al generador y se puede usar dentro de él.

Ejemplo de pasar valores a un generador:

JavaScript
    
      function* generatorFunction() {
        const value1 = yield 1;
        const value2 = yield value1 + 2;
        yield value2 + 3;
      }

      const gen = generatorFunction();

      console.log(gen.next()); // { value: 1, done: false }
      console.log(gen.next(10)); // { value: 12, done: false }
      console.log(gen.next(20)); // { value: 23, done: false }
      console.log(gen.next()); // { value: undefined, done: true }
    
  

Manejo de errores

Los generadores permiten manejar errores usando el bloque try...catch.

Ejemplo de manejo de errores:

JavaScript
    
      function* generatorFunction() {
        try {
          yield 1;
          yield 2;
        } catch (error) {
          console.log('Error capturado:', error);
        }
      }

      const gen = generatorFunction();

      console.log(gen.next()); // { value: 1, done: false }
      console.log(gen.throw(new Error('Algo salió mal'))); // Error capturado: Error: Algo salió mal

      // { value: undefined, done: true }
    
  

Ejemplo de generador para crear una secuencia infinita

Los generadores pueden usarse para crear secuencias infinitas de valores:

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

      const gen = infiniteSequence();

      console.log(gen.next().value); // 0
      console.log(gen.next().value); // 1
      console.log(gen.next().value); // 2

      // y así sucesivamente
    
  

2.4 Ejemplos de uso práctico

Ejemplo 1: Generador para iterar sobre un objeto

JavaScript
    
      function* objectEntries(obj) {
        const keys = Object.keys(obj);
        for (const key of keys) {
          yield [key, obj[key]];
        }
      }

      const obj = { a: 1, b: 2, c: 3 };
      const gen = objectEntries(obj);

      for (const [key, value] of gen) {
        console.log(`${key}: ${value}`);
      }

      // Mostrará:
      // a: 1
      // b: 2
      // c: 3
    
  

Ejemplo 2: Generador para implementar un iterador simple

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

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

      // Mostrará: 1
      // Mostrará: 2
      // Mostrará: 3
    
  

Los generadores en JavaScript son una herramienta poderosa para controlar la ejecución del código, crear iteradores y trabajar con operaciones asíncronas. Comprender la sintaxis y el uso de generadores ayuda a crear un código más flexible y legible, especialmente cuando se trabaja con secuencias de datos y tareas asíncronas.

1
Tarea
Frontend SELF ES, nivel 45, lección 1
Bloqueada
Generador de números
Generador de números
1
Tarea
Frontend SELF ES, nivel 45, lección 1
Bloqueada
Generador dinámico
Generador dinámico
Comentarios
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION