이터레이터와 제너레이터를 활용한 비동기 프로그래밍

17 Sep 2023

javascript

이터레이터와 제너레이터는 자바스크립트에서 비동기 프로그래밍을 구현하는 데 유용한 도구입니다. 이들을 활용하면 비동기적인 작업을 보다 간편하게 처리할 수 있으며, 코드의 가독성과 유지 보수성을 향상시킬 수 있습니다.

이터레이터 (Iterator)

이터레이터는 순차적인 값을 만들어내는 객체입니다. next() 메소드를 통해 값을 하나씩 반환하고, done 프로퍼티를 통해 이터레이터의 완료 여부를 확인할 수 있습니다. 이터레이터를 활용하면 한 번에 하나의 값만 처리하는 방식으로 비동기 작업을 수행할 수 있습니다.

다음은 이터레이터의 사용 예시입니다.

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

const iterator = myIterator();

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

제너레이터 (Generator)

제너레이터는 이터레이터를 만들어내는 함수입니다. function* 키워드를 사용하여 제너레이터 함수를 정의하고, yield 키워드를 통해 값을 반환합니다. 제너레이터는 이터레이터와 마찬가지로 여러 개의 값을 순차적으로 반환할 수 있습니다.

다음은 제너레이터 함수를 사용하여 비동기 작업을 처리하는 예시입니다.

function* fetchData() {
  try {
    const data1 = yield fetch('https://api.example.com/data1');
    const data2 = yield fetch('https://api.example.com/data2');

    console.log(data1);
    console.log(data2);
  } catch (error) {
    console.error(error);
  }
}

function run(generator) {
  const iterator = generator();

  function handle(result) {
    if (result.done) return;

    result.value
      .then((data) => handle(iterator.next(data)))
      .catch((error) => iterator.throw(error));
  }

  handle(iterator.next());
}

run(fetchData);

위 예시에서 fetchData 제너레이터 함수는 두 개의 비동기 작업을 처리하고 결과를 출력합니다. run 함수는 이터레이터를 생성하고, 비동기 작업의 결과를 다음 yield 구문으로 전달하여 처리합니다.

마무리

이터레이터와 제너레이터를 활용하면 비동기 프로그래밍을 더욱 간단하고 직관적으로 처리할 수 있습니다. 코드의 가독성과 유지 보수성을 향상시키면서 비동기 작업을 효율적으로 구현할 수 있습니다. 이러한 기능을 제대로 활용하여 유연하고 효율적인 비동기 프로그래밍을 구현해보세요.

#programming #비동기프로그래밍