[Javascript] 제너레이터(Generator)란?

 

 

JavaScript의 Generator 함수: 이해와 활용

서문

JavaScript의 Generator 함수는 비동기 프로그래밍과 코드 실행을 관리하는 강력한 도구 중 하나입니다. 이번 글에서는 Generator 함수의 정의, 간단한 예제, 그리고 심화 예제를 통해 이 함수를 자세히 살펴보겠습니다.

1. Generator 함수의 정의

Generator 함수는 일반 함수와는 다르게 실행을 일시적으로 멈추고 재개할 수 있는 함수입니다. 함수 내부에서 yield 키워드를 사용하여 값을 내보내며, 호출자는 이 값을 받아올 수 있습니다. Generator 함수는 함수 실행 도중에 일시적으로 중단되며, 호출자에게 제어 권한을 넘겨줍니다.

2. 간단한 예제

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

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

위 예제에서 next() 메서드를 호출할 때마다 Generator 함수는 yield 키워드까지 실행되며 값을 반환합니다. 함수가 모든 값을 내보내면 done은 true가 됩니다.

3. 심화 예제: 비동기 프로그래밍에서의 활용

function fetchData(url) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(\`Data from \${url}\`);
    }, 1000);
  });
}

function* asyncGenerator() {
  const data1 = yield fetchData('url1');
  console.log(data1);
  const data2 = yield fetchData('url2');
  console.log(data2);
}

function runAsyncGenerator(generator) {
  const iterator = generator();
  
  function iterate(iteration) {
    if (iteration.done) return Promise.resolve(iteration.value);
    return Promise.resolve(iteration.value)
      .then(x => iterate(iterator.next(x)));
  }

  return iterate(iterator.next());
}

runAsyncGenerator(asyncGenerator);

위 예제에서 fetchData 함수는 비동기 작업을 모사합니다. asyncGenerator 함수에서는 비동기 작업을 수행하고 그 결과를 출력합니다. runAsyncGenerator 함수를 사용하여 Generator 함수를 실행합니다.

결론

Generator 함수는 JavaScript에서 강력한 도구로서, 코드의 가독성과 유지보수성을 향상시키며 비동기 프로그래밍에서도 활용될 수 있습니다. 이를 통해 더 효율적이고 유연한 코드를 작성할 수 있습니다. Generator 함수에 대한 이해를 바탕으로 여러분의 코드에 적용해보시기 바랍니다.