프로그래밍 「 자바스크립트 편」Javascript 생성기 함수 이해

ES6 (ES2015)에 도입 된 JavaScript 생성기 함수는 함수 실행 프로세스를 제어 할 수있는 고유 한 종류의 함수입니다.

출처 : https://static.wixstatic.com/

호출될 때 완료될 때까지 실행되는 기존 함수와 달리 생성기 함수는 컨텍스트를 유지하면서 필요한 만큼 "일시 중지" 및 "다시 시작"할 수 있습니다.

생성기 기능이란 무엇입니까?

생성기 함수는 키워드를 사용하여 정의되며 생성기라는 개체를 반환합니다. 이 객체는 반복 가능한 프로토콜과 반복기 프로토콜을 모두 준수합니다. 결과적으로 생성기는 값을 한 번에 모두 계산하고 배열 또는 다른 데이터 구조로 반환하는 대신 요청별로 일련의 값을 생성할 수 있습니다. 이 "지연 평가" 기능은 계산 비용이 많이 들거나 잠재적으로 무한할 수 있는 시퀀스에 특히 유용합니다.function*

생성기의 메서드가 호출될 때마다 명령문에 도달할 때까지 함수의 본문을 실행하고, 이 시점에서 일시 중지되고 생성된 값을 반환합니다. 함수는 다시 호출될 때까지 이 상태로 유지됩니다.next()yieldnext()

다음은 기본 생성기 함수입니다.

function* myGenerator() {
  yield 'value1';
  yield 'value2';
  yield 'value3';
}

const generator = myGenerator();

console.log(generator.next().value); // 'value1'
console.log(generator.next().value); // 'value2'
console.log(generator.next().value); // 'value3'
console.log(generator.next().value); // undefined

생성기 함수 사용

위의 예에서 는 생성기 함수이고, 는 반환하는 생성기 객체입니다. 호출할 때마다 명령문에 의해 정의된 시퀀스의 다음 값을 얻습니다. 더 이상 문이 없으면 undefined 및 true가 있는 개체를 반환하여 생성기가 완료되었음을 나타냅니다.myGenerator()generatorgenerator.next()yieldyieldnext()valuedone

를 통해 값을 생성기에 다시 전달할 수도 있습니다. 이러한 값은 표현식의 결과가 됩니다.next()yield

이 예제에서 호출은 생성기를 다시 시작하고 표현식의 결과가 되며, 이 결과는 최종 문자열을 생성하는 데 사용됩니다.next('Hi')'Hi'yield 'Hello'

생성기 함수의 사용 사례

1. 무한 시퀀스 생성

생성기 함수를 사용하면 기존 함수로는 불가능한 무한 시퀀스를 만들 수 있습니다. 예를 들어, 피보나치 수의 끝없는 시퀀스를 생성하는 생성기를 만들 수 있습니다

function* fibonacci() {
  let [prev, curr] = [0, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

const sequence = fibonacci();

console.log(sequence.next().value); // 1
console.log(sequence.next().value); // 2
console.log(sequence.next().value); // 3
console.log(sequence.next().value); // 5
// ... and so on, as much as you need

2. 비동기 작업 처리

생성기를 사용하여 동기식으로 보이는 비동기 코드를 작성하여 가독성을 높일 수 있습니다. 이것은 async/await 구문의 출현으로 덜 일반적이 되었지만 일부 상황에서는 여전히 유용할 수 있습니다.

function* fetchUsers() {
  const response = yield fetch('https://api.example.com/users');
  const users = yield response.json();
  return users;
}

const generator = fetchUsers();

generator.next().value
  .then(response => generator.next(response).value)
  .then(users => generator.next(users));

이 예제에서는 API에서 데이터를 가져오는 생성기입니다. 호출은 Promise를 반환하고, 우리는 응답을 호출한 결과를 반환합니다.fetchUsers()fetch()yieldyieldjson()

3. 복잡한 반복 제어

생성기 함수를 사용하여 사용자 지정 반복기를 만들 수 있습니다. 이는 복잡한 데이터 구조를 처리하거나 비표준 방식으로 데이터를 반복하는 데 유용합니다.

function* preorderTraversal(root) {
  if (root) {
    yield root.value;
    yield* preorderTraversal(root.left);
    yield* preorderTraversal(root.right);
  }
}

const tree = {
  value: 'A',
  left: {value: 'B', left: null, right: null},
  right: {value: 'C', left: null, right: null}
};

for (let node of preorderTraversal(tree)) {
  console.log(node); // Logs: 'A', 'B', 'C'
}

이 예제에서는 이진 트리의 사전 순서 순회를 수행하여 각 노드의 값을 적절한 순서로 산출하는 생성기 함수입니다.preorderTraversal()

최종 단어

JavaScript 생성기 함수는 함수 실행을 세밀하게 제어할 수 있는 강력한 도구입니다. 지연 평가, 동기식과 유사한 방식으로 비동기 작업 처리, 복잡한 데이터 구조에 대한 반복 등을 가능하게 합니다. 이를 사용하는 방법을 이해하면 JavaScript 프로그래밍 기능을 크게 확장할 수 있습니다.