자바스크립트 코드는 어떤 순서로 실행될까?

• 자바스크립트는 스택 자료 구조를 통해서 코드의 실행 순서를 관리한다.
  
• 실행 컨텍스트 스택은 소스 코드 평가 → 실행 컨텍스트 생성 → 실행 컨텍스트 스택에 추가의 과정을 통해 추가된다.
  
• 따라서 실행 컨텍스트 스택 최상위는 현재 실행 중인 코드의 실행 컨텍스트를 의미한다.

예시로 살펴보자

const x = 1;

function foo() {
  const y = 2;

  function bar() {
    const z = 3;
    console.log(x + y + z);
  }
  bar();
}

foo();
// 6

1. 전역 코드 평가와 실행

• 전역 코드 평가 -> 전역 실행 컨텍스트 생성 -> 실행 컨텍스트 스택에 푸시
• 전역 변수 x와 전역 함수 foo가 전역 실행 컨텍스트에 등록됨.
• 전역 실행 컨텍스트 전역 코드가 실행되기 시작하면 전역 변수 x에 값이 할당되고 전역 함수 foo가 호출됨.

2. foo 함수 코드의 평가와 실행

• 전역 함수 foo가 호출되면 전역 코드 실행 일시 중단, 코드의 제어권이 foo 함수 내부로 이동함.
• foo 함수 내부의 함수 코드를 평가 → foo 함수 실행 컨텍스트를 생성하고 실행 컨텍스트 스택에 푸시
• 이때 foo 함수 내부의 지역 변수 y와 중첩 함수 bar가 foo 함수 실행 컨텍스트에 등록됨.
• foo 함수 코드가 실행되면 지역 변수 y에 값이 할당되고 중첩 함수 bar가 호출됨.

3. bar 함수 코드의 평가와 실행

• bar 함수 호출 시작
• foo 함수 실행 일시 중단 & 코드 제어권이 bar 함수 내부로 이동
• bar 함수 코드 평가 후 bar 함수 실행 컨텍스트 생성 & 실행 컨텍스트 스택에 푸쉬
• 이때 bar 함수의 지역 변수 z가 bar 함수 실행 컨텍스트에 등록됨.
• bar 함수 코드가 실행되면 지역 변수 z에 값이 할당되고 console.log 메서드 호출 한 뒤 bar 함수 종료됨.

4. foo 함수 코드로 복귀

• bar 함수가 종료 → 코드 제어권이 foo 함수로 이동
• 자바스크립트 엔진은 bar 함수 실행 컨텍스트를 실행 컨텍스트 스택에서 팝하여 제거

5. 전역 코드로 복귀

• foo 함수 종료 → 코드 제어권은 다시 전역으로 이동
• foo 함수 실행 컨텍스트를 실행 컨텍스트 스텍에서 팝하여 제거
• 스택이 비게 됨.