JavaScript의 생성기 설명

May 05 2023

JavaScript에서 생성기 함수는 실행 중에 일시 중지하고 다시 시작할 수 있는 특별한 종류의 함수입니다. 이는 생성기가 일반 함수처럼 단일 값을 반환하는 대신 시간이 지남에 따라 여러 값을 생성할 수 있음을 의미합니다.

JavaScript에서 생성기 함수는 실행 중에 일시 중지하고 다시 시작할 수 있는 특별한 종류의 함수입니다. 이는 생성기가 일반 함수처럼 단일 값을 반환하는 대신 시간이 지남에 따라 여러 값을 생성할 수 있음을 의미합니다.

생성기 함수는 function* 구문 (또는 키워드 function 다음에 괄호 안에 generator라는 단어가 있는 이전 구문)을 사용하여 선언됩니다 . 생성기 함수가 호출될 때 실제로 즉시 실행되지는 않습니다. 대신 생성기 실행을 제어하는 데 사용할 수 있는 반복자 개체를 반환합니다.

다음은 간단한 생성기 함수의 예 입니다 .

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

생성기를 사용하려면 먼저 생성기 함수를 호출하여 반복자 개체를 만듭니다.

const iterator = generateSequence();

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 }

생성기가 값 생성을 완료 하면 자동으로 { value: undefined, done: true }를 반환합니다.

생성기는 yield 키워드를 사용하여 호출자로부터 입력 값을 받을 수도 있습니다. 다음은 시작 값을 수신하고 이전 값의 두 배인 일련의 값을 생성하는 생성기의 예입니다.

function* generateDoubles(start) {
  let current = start;
  while (true) {
    yield current;
    current *= 2;
  }
}

const iterator = generateDoubles(1);

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 4, done: false }
console.log(iterator.next()); // { value: 8, done: false }

생성기는 사용자 지정 데이터 구조에 대한 반복자를 구현하는 데 자주 사용됩니다. 다음은 객체의 키를 반복하는 생성기의 예입니다.

const myObject = { a: 1, b: 2, c: 3 };

function* generateKeys(obj) {
  for (let key in obj) {
    yield key;
  }
}

const iterator = generateKeys(myObject);
console.log(iterator.next()); // { value: "a", done: false }
console.log(iterator.next()); // { value: "b", done: false }
console.log(iterator.next()); // { value: "c", done: false }
console.log(iterator.next()); // { value: undefined, done: true }

값이 실제로 필요할 때만 계산되는 게으른 평가를 구현하는 데 생성기를 사용할 수도 있습니다. 다음은 필요에 따라 소수를 생성하는 생성기의 예입니다.

function* generatePrimes() {
  let current = 2;
  while (true) {
    if (isPrime(current)) {
      yield current;
    }
    current++;
  }
}

function isPrime(num) {
  for (let i = 2; i < num; i++) {
    if (num % i === 0) {
      return false;
    }
  }
  return num !== 1;
}

const iterator = generatePrimes();
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: 5, done: false }
console.log(iterator.next()); // { value: 7, done: false }
console.log(iterator.next()); // { value: 11, done: false }

생성기는 async/await 구문을 사용하여 비동기 프로그래밍을 구현하는 데에도 사용할 수 있습니다. 다음은 완료하는 데 가변적인 시간이 걸리는 비동기 작업을 시뮬레이트하는 생성기 함수의 예입니다.

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function* generateAsyncValues() {
  let count = 0;
  while (true) {
    await sleep(1000);
    yield count++;
  }
}

(async () => {
  const iterator = generateAsyncValues();
  console.log(await iterator.next()); // { value: 0, done: false }
  console.log(await iterator.next()); // { value: 1, done: false }
  console.log(await iterator.next()); // { value: 2, done: false }
  console.log(await iterator.next()); // { value: 3, done: false }
})();

요약하면 JavaScript의 생성기는 반복자, 지연 평가 및 비동기 프로그래밍을 구현하기 위한 강력한 도구입니다. 이를 통해 함수는 시간이 지남에 따라 여러 값을 생성할 수 있으며 실행 중에 일시 중지 및 다시 시작할 수 있습니다. 개발자는 생성기를 사용하여 보다 효율적이고 유연하며 읽기 쉬운 코드를 작성할 수 있습니다.

읽어 주셔서 감사합니다!

이 기사가 도움이 되었기를 바랍니다. 질문이나 제안 사항이 있으면 의견을 남겨주세요. 귀하의 피드백은 제가 더 나아지는 데 도움이 됩니다.