[JavaScript] yeild*

Generator

javascript에는 generator라는 개념이 있습니다.

이 제네레이터는 함수명 앞에 *를 붙여서 선언할 수 있습니다.

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

const iterator = foo();

iterator.next(); // {value: 1, done: false}
iterator.next(); // {value: 2, done: false}
iterator.next(); // {value: 3, done: false}
iterator.next(); // {value: undefined, done: true}

자세한 것은 [Functional] 제네레이터와 이터러블을 참고해 주시기 바랍니다.

 

yield

yield 키워드는 제네레이터로 만들어진 이터레이터가 next()를 호출할 때 마다 반환할 값을 정해주는 키워드입니다.

yield <expression> 의 형태로 사용되기 때문에, 값을 평가하는 표현식 앞에 yield 키워드를 붙여주면 됩니다. (ECMA Script 명세에 따르면, 정확히는 yield <AssignmentExpression>이긴 합니다.)

 

yield*

그런데 유인동님의 함수형 프로그래밍과 JavaScript ES6+ 응용편 인강을 듣다가 신기한 문법을 봤습니다.

바로 yeild* 입니다. 찾아보니, 이 문법은 yield와 마찬가지로 제레이터 함수 내부에서 값을 정해주는 키워드라고 합니다.

그럼 yield와의 차이점은 무엇일까요?

다음 예제를 보면 감각적으로 느끼실 수 있을 것입니다.

function* g1() {
  yield 2;
  yield 3;
  yield 4;
}

function* g2() {
  yield 1;
  yield* g1();
  yield 5;
}

var iterator = g2();

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: 4, done: false }
console.log(iterator.next()); // { value: 5, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

위 코드의 iterator는 제네레이터 함수 g2의 반환값이며, 평가되는 값이 순서대로 1, 2, 3, 4, 5입니다.

 

function* g3() {
  yield* [1, 2];
  yield* "34";
  yield* Array.from(arguments);
}

var iterator = g3(5, 6);

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: "4", done: false }
console.log(iterator.next()); // { value: 5, done: false }
console.log(iterator.next()); // { value: 6, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

위 코드의 iterator는 제네레이터 함수 g3의 반환값이며, 평가되는 값이 순서대로 1, 2, '3', '4', 5, 6입니다.

 

위 두 코드를 보시면 아시겠지만, yield*키워드는 뒤에 오는 표현식이 이터러블 프로토콜을 준수하는 값이라는 것입니다. 즉 g1()가 반환하는 값은 이터레이터이므로 당연히 이터러블 프로토콜을 준수하며, 배열 및 문자열도 이터러블 프로토콜을 준수하므로 yield* 뒤에 올 수 있는 것입니다.

 

그럼 이터러블 프로토콜을 준수하지 않는 값이 오면 어떻게 될까요?

문법 에러가 발생한다

문법 에러가 발생하네요.

 

참고

reference.codeproject.com/book/javascript/reference/operators/yield*

javascript yield* - CodeProject Reference

www.ecma-international.org/ecma-262/6.0/

ECMAScript 2015 Language Specification – ECMA-262 6th Edition