소개

• 제너레이터 함수(Generator Functions)는 ES6에서 도입된 함수 형태로, 함수의 실행을 일시 중단하고 재개할 수 있는 기능을 제공합니다.
• 제너레이터 함수는 제너레이터 객체를 반환하며, 이 객체는 이터레이터(Iterator) 프로토콜을 따릅니다.
• 이터레이터는 next() 메서드를 사용하여 제너레이터 함수의 실행을 제어하고, yield 키워드를 통해 값을 생성합니다.

제너레이터 함수의 특징

• 함수 정의: 제너레이터 함수는 function* 키워드로 정의됩니다.

• function*키워드를 사용하여 함수의 코드 블록을 제너레이터로 지정합니다.

• yield 키워드: yield 키워드를 사용하여 값을 생성하고 함수의 실행을 일시 중단합니다.

• yield 키워드는 제너레이터 함수 내부에서만 사용할 수 있습니다. yield 표현식의 결과는 next() 메서드가 호출될 때 제너레이터 객체로 반환됩니다.

• next() 메서드: 제너레이터 객체의 next() 메서드를 호출하여 함수의 실행을 제어합니다. next() 메서드는 { value, done } 형태의 객체를 반환합니다.

• value는 yield 표현식에서 생성된 값이고, done은 제너레이터 함수의 실행이 완료되었는지를 나타내는 불리언 값입니다.

• 일시 중단과 재개: 제너레이터 함수는 실행 중 일시 중단되고, next() 메서드가 호출될 때 재개됩니다.
  이를 통해 비동기 작업의 흐름을 제어하거나 복잡한 상태 관리를 수행할 수 있습니다.

예제

이제 간단한 예제와 좀더 어려운 예제를 통해 더 알아보겠습니다.

간단한 예제

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

const generator = numberGenerator();
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
console.log(generator.next().value); // 3
console.log(generator.next().done); // true

위 예제는 간단한 제너레이터 함수를 정의하고, next() 메서드를 호출하여 값을 순차적으로 가져오는 예제입니다.
yield 키워드를 사용하여 값을 생성하고, next() 메서드를 호출할 때마다 다음 값이 반환됩니다.

복잡한 예제

제너레이터 함수를 사용하여 비동기 작업의 흐름을 제어하는 예제입니다. 이 예제에서는 fetch()를 사용하여 비동기적으로 데이터를 가져오고, 제너레이터 함수를 사용하여 데이터를 처리하는 과정을 보여줍니다.

function* fetchData() { //  fetchData() 정의
  try {
    const response = yield fetch('https://api.example.com/data');
    const data = yield response.json();
    console.log('Received data:', data);
  } catch (error) {
    console.error('Error:', error);
  }
}

// 제너레이터 객체 생성
const generator = fetchData();

// 제너레이터 실행
function runGenerator() {
  const promise = generator.next().value;

  // instanceof 연산자는 객체의 타입 확인 및 상속 관계를 파악하는 데 사용됩니다
  if (promise instanceof Promise) { 
    promise
      .then((result) => generator.next(result)) // 예외가 발생하지 않았다면 다음 구문을 실행시켜 값을 불러온다.
      .catch((error) => generator.throw(error)); // 에러를 반환해서 generator 함수를 중단 시킨다.
  }
}

runGenerator();

위 예제에서는 fetchData()라는 제너레이터 함수를 정의합니다. 이 함수는 fetch()를 사용하여 비동기적으로 데이터를 가져오고, 가져온 데이터를 처리하는 과정을 담고 있습니다.

runGenerator() 함수를 호출하여 제너레이터 함수를 실행합니다. 제너레이터의 next() 메서드를 호출하면 첫 번째 yield 문까지 실행됩니다. 그리고 fetch()를 통해 데이터를 가져오는 비동기 작업이 시작됩니다.

fetch() 함수는 Promise를 반환하므로, promise instanceof Promise를 사용하여 Promise인지 확인합니다. Promise가 반환된 경우, then() 메서드를 사용하여 다음 yield 문으로 진행하고, catch() 메서드를 사용하여 에러 처리를 합니다.

• 이런식으로 제너레이터 함수를 통해 비동기 작업을 순차적으로 제어할 수 있습니다.
• 제너레이터 함수는 비동기 작업의 복잡한 흐름을 단순화하고, 코드를 읽기 쉽고 유지 관리하기 쉽도록 도와줍니다.