you don't know js - generator 실행 순서 파악하기

maliethy·2021년 5월 5일
0

javascript

목록 보기
2/2
function *foo(){
    let x = yield 2
    z++
    let y = yield(x*z)
    console.log(x,y,z)
}

let z = 1

const it1 = foo()
const it2 = foo()

 let val1 = it1.next().value
 let val2 = it2.next().value

  val1 = it1.next(val2* 10).value
  val2 = it2.next(val1*5).value

  it1.next(val2/2)
  it2.next(val1/4)

위 코드의 실행순서를 정리하면 다음과 같다.

1

const it1 = foo()
const it2 = foo()

foo() 제너레이터를 실행할 이터레이터(it1, it2)를 마련한다. foo() 인스턴스 2개를 마련했다.

2

 let val1 = it1.next().value
 let val2 = it2.next().value

두 인스턴스에서 next()를 호출한다. yield에서 멈추고 yield 오른편에 있는 지정된 값 2를 각각 넘겨받는다.
val1 = 2 , val2 = 2

3

val1 = it1.next(val2* 10).value
val210은 210이고 이 값이 next() 호출 시 매개변수로 인스턴스 it1에 전달된다.
따라서 yield자리에 20를 넣어주어 let x = 20이 되고, z++로 z = 2가 된다.
다음 yield인 let y = yield에서 멈추고 yield 오른편에 지정된 값 xz가 next().value에 담긴다.
val1 = 20
2 = 40이 된다.

4

val2 = it2.next(val1*5).value
val15은 405이고 이 값이 next() 호출 시 매개변수로 인스턴스 it2에 전달된다.
따라서 yield자리에 200를 넣어주어 let x = 200이 되고, z++로 z = 3가 된다.
다음 yield인 let y = yield에서 멈추고 yield 오른편에 지정된 값 xz가 next().value에 담긴다.
val2 = 200
3 = 600이 된다.

5

it1.next(val2/2)
val2/2가 next() 호출을 통해 yield에 전달되어 y = val2/2 = 300이 된다.
콘솔창에 20, 300, 3이 표시된다.

6

it2.next(val1/4)
val1/4가 next() 호출을 통해 yield에 전달되어 y = val1/4 = 10이 된다.
콘솔창에 200, 10, 3이 표시된다.

출처: you don't know js : this와 객체 프로토타입, 비동기와 성능

profile
바꿀 수 있는 것에 주목하자

0개의 댓글