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

Maliethy·2021년 5월 5일

javascript

목록 보기

2/5

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 = 202 = 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 = 2003 = 600이 된다.