본문 바로가기

JavaScript

yield 사용법 - 생성기(generator) 그리고 반복기와 반복기 제공자

yield란


yield는 마치 return 처럼 동작하며 정해진 구간을 순서대로 실행하며 반드시 'function*' 을 사용한 함수에서 사용합니다.

 

 

생성기


'function*' 로 만든 함수를 생성기(generator)라고 부릅니다.

주의할 점은 'function*'은 하나의 키워드이기때문에 화살표 함수[()=>{}]를 만들 수 없습니다.

 

function* generator() {
  console.log('generator started...');
  let value = 1;
  while (value < 4) {
    yield value++;
  }
  console.log('generator finished...');
}

// case 1
for (let value of generator()) {
  console.log(value);
}
// === 실행 결과 ===
// generator started...
// 1
// 2
// 3
// generator finished...


// case 2
let iterator = generator();
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}

 

 

반복기(iterator)와 반복기 제공자(iterable)


반복기의 특징은 next라는 이름의 메서드를 제공하며 next 메서드는 value와 done이라는 두 개의 속성을 가진 객체를 반환합니다.

value에는 값을, done는 완료여부를 false, true로 반환합니다.

앞선 예제에 case2와 다음 예제를 참고하시면 됩니다.

yield를 통하여 반복기 예시를 들었지만 반복기는 반드시 yield를 이용하지 않아도 됩니다.

// case3
function* a() {
  yield 1;
  yield 5;
}

let iterator = a();

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

반복기 제공자는 이름 그대로 반복기를 제공하는 역할을 하는 'a()'입니다.

반복기 제공자를 호출하여 iterator 변수에 저장하고 next() 함수를 이용하여 value와 done을 반환합니다.

 

 

yield*


'yield*'을 이용하여 다른 생성기나 배열을 대상으로 동작할 수 있습니다.

즉, 'function*' 의 역할을 한다고 생각하시면 쉬울 것 같습니다.

function* gen12() {
  yield 1;
  yield 2;
}

export function* gen12345() {
  yield* gen12();
  yield* [3, 4];
  yield 5;
}

for (let value of gen12345()) {
  console.log(value);
}

// === 실행 결과 ===
// 1
// 2
// 3
// 4
// 5
Do it 타입스크립트 프로그래밍 / 이지스퍼블리싱 참고하였습니다.
반응형