(2) 이벤트 루프

- V8 엔진을 기준으로 런타임 외부에서 JS 비동기 실행을 돕기 위해 만들어진 장치이며 자바스크립트 코드를 효과적으로 실행하기 위한 다양한 장치들이 있음.

 

# 1. 호출 스택 (call stack) 과 이벤트 루프 (event loop)

- 호출 스택: JS 에서 수행해야 할 코드나 함수를 순차적으로 담아두는 stack

function foo() {
	console.log('foo')
}

function bar() {
	console.log('bar')
}

function fooBar() {
	console.log('fooBar')
	foo()
	bar()
}

fooBar()

- fooBar() 호출 후 내부에서 bar(), foo()를 순차적으로 호출하는 함수로 다음과 같은 순서로 call stack이 쌓이고 비워진다.

  1. fooBar()  [+call stack]

  2. fooBar() 의 console.log 가 [+call stack]

  3. 2. 실행 완료된 이후 다음 코드 [-call stack] (아직 fooBar() 존재)

  4. foo() [+call stack]

  5. foo() 의 console.log 가 [+call stack]

  6. 5. 실행  완료된 이후 다음 코드 [-call stack] (아직 fooBar(), foo() 존재)

  7. foo() [-call stack]

  8. bar() [+call stack]

  9. bar() 의 console.log 가 [+call stack]

  10. 9. 실행  완료된 이후 다음 코드 [-call stack] (아직 fooBar(), bar() 존재)

  11. bar() [-call stack]

  12. fooBar() [-call stack]

  13. [call stack 0]

- 이벤트 루프: 호출 스택이 비어 있는지 여부를 확인하는 것으로 단순히 이벤트 루프만의 단일 스레드 내부에서 호출 스택 내부에 수행해야 할 작업이 있는지 확인하고, 수행해야할 코드가 있다면 JS 엔진을 사용하여 실행함. 코드의 실행과 호출스택이 비어 있는지를 확인하는 것 모두 단일 스레드에서 일어나므로 두 작업은 동시에 실행될 수 없으며 순차적으로 실행된다.