yield에 대해 질문이 있습니다.

모던 자바스크립트(ES6+) 기본

3. yield 키워드

해결된 질문

21.05.25 16:18 작성

224

yield 키워드 강의를 듣다가 한 가지 의문이 들어 질문을 남기게 되었습니다.

function* test(one) {
  let two = yield one;
  let param = yield one + two;
  yield param + one;
}
const testObj = test(10);
console.log(testObj.next());
console.log(testObj.next());
console.log(testObj.next(20));
console.log(testObj.next());

위의 코드를 제 나름대로 해석해보면,

1. generator object를 생성한다.

2.첫 번째 next()가 호출 되었을 때 one은 parameter로 넘긴 10을 가지고 있는 상태이므로 { value: 10, done : false }를 반환한다. 이 후 two에 값을 할당하지 않는다.

3. 다음 next()에선 parameter로 보낸 값이 없으므로 two에는 undefined가 할당된다.

3번에서 two에 undefined가 할당되고 yield one + two는 undefined + undefined로 계산되야 하는거 아닌가요? 그런데 one은 10이 할당된 것으로 나와서 어떻게 해석해야할지 잘 모르겠습니다.

그리고 param도 제 생각엔 one + two가 계산된 값이 할당되어야 할 것 같은데, 20이 할당되어있네요.

답변 주시면 감사하겠습니다.

es6 javascript

답변 2

김영보

지식공유자

2021. 05. 25. 20:46

==> generator 함수도 함수이므로 함수 처리가 끝날 때까지 one의 값을 갖고 있기 때문입니다. 아래처럼 함수의 마지막 줄에 return one을 작성하면 {done: true, value: 10}이 반환됩니다.
yield param + one;
return one;
-----------
아래처럼 debugger를 작성하고 라인 단위로 따라가면 값의 변화를 직관적으로 볼 수 있습니다.
debugger;
console.log(testObj.next());
debugger;
console.log(testObj.next());
debugger;
console.log(testObj.next(20));
debugger;
// 여기에서 {done: true, value: 10} 반환
console.log(testObj.next());

beomseok Choi

2022. 05. 30. 09:39

저도 이 부분이 답변을 보고도 이해가 안되서 좀 더 공부해봤는데요. next() 메소드의 파라미터로 넘겨주는 인자 값이 제네레이터 함수 인자 값으로 들어가는게 아니라 yield 표현식을 할당받는 변수에 할당되는 게 핵심인 것 같네요. 즉 마지막 yield에서는 param 변수에 20이 할당되어서 30을 yield하는 거군요.

인프런 커뮤니티 질문&답변

yield에 대해 질문이 있습니다.