호출스택과 이벤트 루프

JS 엔진에서 함수가 실행되는 순서는 어떻게 될까?
아래 코드를 살펴보자

const first = () => {
    second()
    console.log('first')
}
const second = () => {
    third()
    console.log('second')
}
third = () => {
    console.log('third')
}
first()

가장 먼저 호출된 함수는 first 함수. 하지만 콘솔에 기록된 순서는
third -> second -> first 순이다. 함수가 실행될 때 JS 엔진 내부에서 실행되는 순서대로 쌓이게 되는데 이것을 콜스택이라고 부른다.

위 그림과 같이 함수 실행 전에는 anonymous(전역) 스택이 쌓이고
가장먼저 실행된 first, second, third 순으로 함수가 실행된다.

third 함수가 실행되고 콘솔에 'third'를 기록하고 사라지면
second, first 순서대로 콘솔을 기록하고 모든 함수가 실행되고
종료된다. 그러면 아래와 같은 코드는 어떻게 실행 될까?

const run = () => {
    console.log('3초 후 실행')
}

console.log('시작')
setTimeout(run, 3000)
console.log('끝')

콘솔 기록 예상 : '시작'-> '3초 후 실행' -> '끝'
결과: '시작' -> '끝'-> '3초후 실행'
먼저 실행된 setTimeout 함수가 콘솔에 먼저 기록되어야 하는데 결과는 다르다.
-> 호출스택으로는 비동기함수의 설명이 어렵다.

JS에서 함수가 실행될 때 내부 엔진에서 실행되는 과정이다
이벤트 루프는 이벤트 발생(setTimeout 등) 시 호출할 콜백 함수들을 관리하고
호출할 순서를 결정한다.

태스크 큐는 이벤트 발생 후 호출되어야 할 콜백함수들이 호출스택으로 이동하기 전 대기
백그라운드: 타이머나 비동기 작업 콜백, 리스너들이 대기하는 공간으로 여러 작업이 동시에 실행될 수 있다.

호출된 setTimeout은 백그라운드로 이동해 3초후 태스크 큐로 보내지고 이벤트 루프에 의해
스택에 쌓이고 실행된다.

const oneMore = () => {
  console.log('one more')
}
const run = () => {
  console.log('run run')
  setTimeout(()=>{
    console.log('WOW')
  },0)
  new Promise((resolve)=>{
    resolve('hi')
  }).then(console.log)
  oneMore()
}

setTimeout(run, 5000)

함수를 분석하면서 콘솔에 기록되는 순서를 예상해보자

1) run함수 호출 콘솔에 'run run' 기록 setTimeout 호출
2) setTimeout 익명함수 백라운드로 이동
3) new Promise 실행 resolve('hi') 실행 then console.log('hi') 백그라운드로 이동

4) oneMore() 실행 콘솔에 'one More' 기록
5) 백그라운드에 setTimeout 익명함수, then console.log('hi')이 남아있다.
6) 우선 순위에 의헤 Promise 먼저 실행
콘솔 기록 순서: 'run run' -> 'one more' -> 'hi' -> 'WOW'

JS에서 함수가 실행되는 순서를 알고 분석해서 맛있는 프로그래밍을 해보자!