En el mundo del desarrollo web, es esencial estar al tanto de las últimas características y herramientas que ofrece el lenguaje ECMAScript para crear aplicaciones más eficientes y potentes. Uno de los conceptos más interesantes y poderosos que se ha introducido es el de objeto generador en ECMAScript, el cual ha revolucionado la forma en la que se maneja el flujo de datos en JavaScript. En este artículo, nos sumergiremos en el emocionante mundo de los objetos generador en ECMAScript , los métodos next, throw y return, la expresión yield, las funciones generadoras y la combinación con async y await.

¿Qué encontrarás en este post?

¿Qué es un objeto generador en ECMAScript?

Un objeto generador en ECMAScript es una estructura especial que permite pausar y reanudar la ejecución de una función en diferentes puntos. En lugar de ejecutarse de principio a fin como una función convencional, una función generadora puede detenerse en medio de su ejecución y luego continuar desde el punto de pausa. Esto se logra mediante la expresión yield, que es la clave para que el objeto generador en ECMAScript funcione de manera efectiva.

La expresión yield: la clave del objeto generador en ECMAScript

Cuando se utiliza la expresión yield dentro de una función generadora u objeto generador en ECMAScript, se detiene la ejecución de la función en ese punto específico y se devuelve un valor que se puede asignar o utilizar en otro contexto. Cada vez que se llama al método next del objeto generador, la función se reanudará desde el punto de la última instrucción yield, lo que permite que los datos se generen bajo demanda.

//objeto generador en ECMAScript
function* contador() {
  yield 1;
  yield 2;
  yield 3;
}

const generador = contador();
console.log(generador.next().value); // Output: 1
console.log(generador.next().value); // Output: 2
console.log(generador.next().value); // Output: 3

Métodos next, throw y return

Los objetos generador en ECMAScript ofrecen tres métodos fundamentales que ayudan a controlar el flujo de ejecución:

next(): este método permite reanudar la ejecución de la función generadora desde el punto de pausa establecido por la última expresión yield. Además, puede recibir un argumento para modificar el valor del yield en la próxima reanudación.
throw(): cuando se llama a este método, se lanza una excepción en el punto de pausa actual dentro de la función generadora. Esto permite manejar errores y situaciones inesperadas de manera controlada.
return(): al llamar a este método, se detiene la ejecución de la función generadora y se especifica un valor de retorno para el objeto generador.

Funciones generadoras y funciones regulares

Las funciones generadoras se distinguen de las funciones regulares por el asterisco que se coloca después de la palabra clave function.

//objeto generador en ECMAScript
// Función generadora
function* generadorNumeros() {
  yield 1;
  yield 2;
  yield 3;
}

// Función regular
function suma(a, b) {
  return a + b;
}

Las funciones generadoras pueden pausar y reanudar su ejecución a través de yield, mientras que las funciones regulares se ejecutan de principio a fin y solo se pueden detener cuando alcanzan una declaración de retorno.

Combinando generadores con async y await

La combinación de objeto generador en ECMAScript con las palabras clave async y await abre nuevas posibilidades para el manejo de flujos asíncronos y la escritura de código más limpio y legible. La expresión yield puede utilizarse con await para esperar la resolución de una promesa antes de continuar con la ejecución del generador.

//objeto generador en ECMAScript
function esperar(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function* generadorAsincrono() {
  yield 1;
  await esperar(1000);
  yield 2;
  await esperar(500);
  yield 3;
}

const asyncGenerador = generadorAsincrono();
(async () => {
  console.log(await asyncGenerador.next()); // Output: { value: 1, done: false }
  console.log(await asyncGenerador.next()); // Output: { value: 2, done: false }
  console.log(await asyncGenerador.next()); // Output: { value: 3, done: false }
})();

¡Sigue aprendiendo sobre desarrollo web!

Si estás interesado en dar un paso más en tu carrera como desearrollador web y deseas dominar conceptos avanzados, como los objetos generadores en ECMAScript, te recomendamos el Desarrollo Web Full Stack Bootcamp de KeepCoding. En este bootcamp, no solo aprenderás a dominar objetos generadores y otras características de ECMAScript, sino que también adquirirás un conjunto completo de habilidades teóricas y prácticas para convertirte en un desarrollador web altamente cualificado y listo para enfrentar los desafíos de la industria tecnológica.

¡Pide información y no pierdas la oportunidad de cambiar tu vida y entrar en el sector IT en poco tiempo!