이벤트 루프

브라우저의 JavaSCript 코드 실행 과정

호출 스택(Call Stack)

---

개념

• 호출 스택은 스택 형태의 저장소다.
• JavaScript 엔진은 함수 호출과 관련된 정보를 이 곳에서 관리한다.

호출 스택에 쌓이는 과정

function add(x, y) {
  return x + y;
}

function add2(x) {
  return add(x, 2); // add 호출 
}

function add2AndPrint(x) {
  const result = add2(x); //add2 호출 
  console.log(result); //console.log 호출
}

add2AndPrint(3); // add2AndPrint 호출 

호출 스택에 쌓이는 과정을 설명한다.

1. add2AndPrint() 가 호출 스택에 쌓인다.
2. add2() 가 다음으로 쌓인다.
3. add() 가 맨 위에 쌓인다.
4. add() 가 실행되고 add2()로 돌아간다.
5. add2() 가 실행되고 add2AndPrint() 안에서 실행되어야 할 함수는 console.log 다.
6. console.log() 가 실행되고 add2AndPrint() 가 종료된다.

실행 맥락(execution context)

• 호출 스택에 저장되는 각 항목을 execution context 라고 한다.
• execution context에 저장되는 항목
  • 함수 내부에서 사용되는 변수
  • 스코프 체인
  • this 가 가리키는 객체

JS 코드 실행 시 호출 스택 상황

1. 스크립트를 불러올 때, 전역 실행 맥락을 호출 스택에 추가
2. 함수가 호출되면, 해당 호출에 대한 실행 맥락 생성 후 호출 스택에 Push
3. 변수가 대입되면, 호출 스택에 저장되어 있는 변수 내용 변경
4. 함수가 종료되면, 결과값 반환 후 호출 스택 가장 위에 있는 실행 맥략 pop
5. 스크립트 실행이 끝나면, 전역 실행 맥락을 호출 스택에서 pop

웹 브라우저는 호출 스택에 실행 맥락이 존재하는 동안, 즉 실행 중인 함수가 존재하는 동안에는 먹통

이벤트 루프(Event loop)

---

원활한 작업을 위해 브라우저는 오래 걸리는 일을 이벤트 루프를 이용하여 처리할 수 있다.

• 기다려야 하는 일을 JS 엔진이 처리하지 않고 API를 통해 브라우저에 위임한다.이 때, 일이 끝나고 실행시킬 콜백을 같이 등록
• 위임된 일이 끝나면 작업 큐(task queue)에 추가
• 브라우저는 호출 스택이 비워질 때마다 작업 큐에서 가장 오래된 작업을 꺼내와 해당 작업에 대한 콜백을 실행
• 이 과정이 반복되는데 이를 이벤트 루프 라고 부른다.