카탈로그

개념

yield

yield*

관련 리소스

콘셉트

yield와 yield*는 모두 Generator에 맞추어 사용되었다.

yield

yield가 키워드이며 구문은 다음과 같습니다.

[rv] = yield [expression];

expression: Generator 함수가 되돌아오는 범람기 대상 호출next 방법은 얻은 값이다.

rv: 대상 호출next방법은next방법에 전달되는 매개 변수

여기서 간단하게 next 방법을 말하는데 그 문법은 다음과 같다.

gen.next(value)

value: Generator 함수에 전달된 값, 즉 위의 rv

여기서 재미있는 것은 바로 next 방법에 전달되는 값value이다. 다음은 예를 통해 살펴보자.

function* _testYieldExpression(){
	let value = '';
	value = yield 'yield value';
	console.info(`1 value is: ${value}`);// 1

	value = yield 'yield value';
	console.info(`2 value is: ${value}`);// 2
	return 'over';
}

let _testIterator = _testYieldExpression();
let _res = _testIterator.next();
console.info(`1:no params to next, result is: ${_res.value}`);// 3

_res = _testIterator.next('params from next');
console.info(`2:params to next, result is: ${_res.value}`);// 4

_res = _testIterator.next();
console.info(`3:params to next, result is: ${_res.value}`);// 5

출력은 다음과 같습니다.

1:no params to next, result is: yield value
1 value is: params from next
2:params to next, result is: yield value
2 value is: undefined
3:params to next, result is: over

주석에 몇 개의 출력 문구가 표시되어 있는데 출력 1은 두 번째 호출next 방법에서 실행된 것으로 볼 수 있다. 이때value 값은 next 방법에 전달된 매개 변수이지만 _testYieldExpression 함수에서 볼 수 있다value = yield 'yield value'. 그래서 첫 번째 실행next 함수를 실행할 때 문구yield 'yield value'는 되돌아오는 값이 없고 부여된 값이 없다value로 이해할 수 있다.두 번째 호출next에서 next 함수의 매개 변수를value에 부여합니다.좀 혼란스럽지만 끊어서 보면 더 잘 보일 거예요.

yield*

yield*는 표현식이기 때문에 값을 되돌려줍니다. 그 문법은 다음과 같습니다.

yield* [[expression]];

expression: 범람 가능한 대상이며, 수조일 수도 있고, 다른 Generator 함수의 집행 표현식일 수도 있다.
간단하게 말하자면 여러 개의 yield 문장을 어떤 규칙에 따라 하나로 합치는 것이다. 예는 다음과 같다.

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}

관련 리소스

MDN-yield*MDN-yield의'ECMAScript 6 입문'-완일봉