[Javascript] 이벤트 루프 - 런타임 개념

 

Javascript의 런타임 모델은 이벤트 루프에 기반하고 있다

 

 

 

Stack (스택) - 선입후출

함수의 호출들은 '프레임' 스택을 형성 한다.

'프레임'에는 함수의 인수와 지역변수가 포함되어 있다.

function foo(b) {
  let a = 10
  return a + b + 11
}

function bar(x) {
  let y = 3
  return foo(x * y)
}

const baz = bar(7) // 42를 baz에 할당

 

실행 순서

1. bar를 호출할 때, bar 함수의 프레임(A 프레임)이 생성된다.

2. bar가 foo를 호출할 때, foo 함수의 프레임(B 프레임)이 A 프레임의 위로 푸시 된다.

3. foo가 반환하면, B 프레임을 스택 밖으로 꺼낸다.

4. bar가 반환하면 A 프레임을 스택 밖으로 꺼내어 스택이 비게 된다.

 

인수와 지역 변수는 스택 바깥에 저장되므로 바깥 함수가 반환한 후에도 계속 존재할 수 있다.

(중첩 함수에서 지역 변수에 접근할 수 있는 이유)

 

Heap (힙) : 단순히 메모리의 큰 영역을 지칭하는 용어

객체는 힙에 할당

 

 

Queue (큐) - 선입선출

Javascript 런타임은 메시지 큐, 즉 처리할 메시지의 대기열을 사용한다.

각각의 메시지에는 메시지를 처리하기 위한 함수가 연결되어 있다.

 

이벤트 루프의 임의 시점에, 런타임은 대기열에서 가장 오래된 메시지부터 큐에서 꺼내 처리하기 시작한다.

이를 위해 런타임은 꺼낸 메시지를 매개변수로, 메시지에 연결된 함수를 호출한다.

다른 함수와 마찬가지로, 호출로 인한 새로운 스택 프레임도 생성된다.

 

함수 처리는 스택이 다시 텅 빌 때까지 계속된다.

그 후, 큐에 메시지가 남아있으면 같은 방법으로 처리를 계속 진행한다.