호출스택

function first() {
  second();
  console.log('첫번째');
}

function second() {
  third();
  console.log('두번째');
}

function third() {
  console.log('세번째');
}

first();

새번째 -> 두번째 -> 첫번째

이벤트루프

function oneMore() {
  console.log('one more');
}

function run() {
  console.log('run run');
  setTimeout(() => {
    console.log('wow');
  }, 0)
  
  new Promise((resolve) => {
    resolve('hi');
  })
    .then(console.log);
  oneMore(); 
}

setTimeout(run, 5000);

run run -> one more -> hi -> wow

이벤트루프 구조

• 이벤트 루프: 이벤트 발생(setTimeout 등) 시 호출할 콜백 함수들(위의 예제에서는 run)을 관리하고, 호출할 순서를 결정하는 역할

• 태스크 큐: 이벤트 발생 후 호출되어야 할 콜백 함수들이 순서대로 기다리는 공간

• 백그라운드: 타이머나 I/O 작업 콜백, 이벤트 리스너들이 대기하는 공간. 여러 작업이 동시에 실행될 수 있음