실행 컨텍스트 스택

 

 

const x = 1;

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

foo();

 

위 예제는 소스코드의 타입으로 분류할 때, 전역코드와 함수 코드로 이루어져 있다.

자바스크립트 엔진은 먼저 1) 전역 코드를 평가하여 실행 컨텍스트를 생성한다.

그리고 2) 함수가 호출되면 3) 함수 코드를 평가하여 함수 실행 컨텍스트를 생성한다.

 

코드가 실행되는 시간의 흐름에 따라 실행 컨텍스트 스텍에는 다음과 같이 실행 컨텍스트가 추가되고, 제거된다.

 

 

1/ 전역코드의 평가와 실행

1) 전역 코드 평가

자바스크립트 엔진은 먼저 전역코드를 평가 → '전역 실행 컨텍스트' 생성 → 실행 컨텍스트 스택에 푸시.

전역변수 x, 전역 함수 foo는 '전역 실행 컨텍스트'에 등록된다.

 

2) 전역코드 실행

전역변수 x에 값 할당, 전역 함수 foo 호출된다.

 

 

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

전역 함수 foo 호출 → '전역코드 실행' 일시중단 → 코드의 제어권(control)이 foo함수 내부로 이동.

 

1) foo 함수코드의 평가

자바스크립트 엔진은 foo함수 내부의 함수코드 평가 → 'foo함수 실행 컨텍스트' 생성 → 실행 컨텍스트 스택에 푸시.

foo함수의 지역변수 y와, 중첩함수 bar가 foo함수 실행 컨텍스트에 등록된다.

 

2) foo 함수코드의 실행

지역변수 y에 값 할당, 중첩함수 bar 호출된다.

 

 

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

중첩함수 bar가 호출 → 'foo함수 코드 실행' 일시중단 → 코드의 제어권이 bar 함수 내부로 이동

 

1) bar 함수코드의 평가

자바스크립트 엔진은 bar 함수 내부의 함수 코드를 평가 → 'bar함수 실행 컨텍스트' 생성 → 실행 컨텍스트 스택에 푸시.

bar 함수의 '지역 변수 z'가 bar함수 실행 컨텍스트에 등록된다.

 

2) bar 함수코드의 실행

지역변수 z에 값이 할당, console.log 메서드를 호출한 후, bar함수는 종료된다.

 

 

4/ foo 함수 코드로 복귀

- bar 함수가 종료되면, 코드의 제어권은 다시 foo 함수로 이동.

- 자바스크립트 엔진은 bar 함수 실행컨텍스트를 실행 컨텍스트 스택에서 pop하여 제거.

- 그리고 foo함수는 더이상 실행할 코드가 없으므로 종료된다.

 

 

5/ 전역 코드로 복귀

- foo함수가 종료되면 코드의 제어권은 다시 전역 코드로 이동한다.

- 자바스크립트 엔진은 foo 함수 실행컨텍스트를 실행 컨텍스트 스택에서 pop하여 제거.

- 더 이상 실행할 전역 코드가 남아있지 않으므로 전역 실행 컨텍스트도 실행 컨텍스트 스택에서 pop하여 제거.

- 실행 컨텍스트 스택에는 아무것도 남아있지 않게 된다.

 

 

이처럼 실행 컨텍스트 스택은 코드의 실행 순서를 관리한다.

소스코드가 평가되면 실행컨텍스트가 생성되고, 실행 컨텍스트 스택에 최상위에 쌓인다.

실행 컨텍스트 스택의 최상위에 존재하는 실행 컨텍스트는 언제나 현재 실행 중인 코드의 실행 컨텍스트다.

따라서 실행 컨텍스트 스택의 최상위에 존재하는 실행 컨텍스트를 '실행중인 실행 컨텍스트'라고 부른다.

 

 

**참고자료 : 책 모던자바스크립트 Deep Dive