제너레이터는 자바스크립트에서 비동기 코드를 다루는데 유용한 도구입니다. 프로미스와 함께 사용하면 비동기 코드를 더욱 간편하게 작성할 수 있습니다.

제너레이터란?

제너레이터는 함수의 실행을 일시 중지하고 재개할 수 있는 특별한 종류의 함수입니다. 제너레이터는 function* 키워드로 정의되며, 내부에는 yield 키워드를 사용하여 값을 반환합니다.

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

const gen = myGenerator();
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 }

제너레이터 함수를 호출하면 제너레이터 객체가 반환되고, next() 메서드를 호출하여 제너레이터 내부의 실행을 제어할 수 있습니다. next() 메서드를 호출할 때마다 yield 키워드까지 실행되고 해당 값이 객체로 반환됩니다. 마지막 next() 호출에서는 { value: undefined, done: true }가 반환되며 제너레이터 함수가 종료됩니다.

제너레이터와 프로미스 함께 사용하기

제너레이터는 비동기 작업의 순서를 제어하고, 프로미스는 비동기 작업의 결과를 다루는데 사용됩니다. 제너레이터와 프로미스를 함께 사용하면 비동기 코드를 더욱 명확하고 가독성있게 작성할 수 있습니다.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched');
    }, 2000);
  });
}

function* dataGenerator() {
  try {
    const data = yield fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

const gen = dataGenerator();
const promise = gen.next().value;

promise.then((data) => {
  gen.next(data);
});

위의 예제에서는 fetchData() 함수를 호출하여 데이터를 비동기로 가져오고, 가져온 데이터를 제너레이터 함수에 전달합니다. 제너레이터 함수 내부에서는 yield 키워드를 사용하여 프로미스가 완료될 때까지 기다립니다. 프로미스가 완료되면 then() 메서드를 사용하여 다음 next() 호출에 데이터를 전달합니다.

제너레이터와 프로미스를 함께 사용하면 비동기 코드를 순차적으로 작성할 수 있어서 가독성을 향상시킬 수 있습니다. 비동기 작업의 순서를 직접 제어할 수 있어서 코드의 복잡성을 줄일 수 있습니다.

마무리

제너레이터와 프로미스는 각각 자체로 강력한 기능을 가지고 있지만, 함께 사용하면 비동기 코드를 더욱 효율적으로 작성할 수 있습니다. 제너레이터를 사용하여 비동기 작업의 순서를 제어하고, 프로미스를 사용하여 비동기 작업의 결과를 처리하세요.

참고 자료:

• MDN Web Docs - 제너레이터
• MDN Web Docs - 프로미스