실행컨텍스트 - 자바스크립트 동작원리

실행컨텍스트 execution context

실행컨텍스트는 자바스크립트의 동작원리를 담고 있는 핵심 개념이다.

자바스크립트는 '소스코드의 평가'와 '소스코드의 실행'의 과정으로 나누어 처리한다.

 

 

소스코드 평가의 과정에서는 실행컨텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행하여 실행컨텍스트가 관리하는 스코프(렉시컬 환경)에 등록한다. 소스코드 평가 과정이 끝나면 선언문을 제외한 소스코드가 순차적으로 실행된다(런타임)

 

Deepdive ( 실행컨텍스트 )

var x;
x = 1;

// 소스코드 평가 : 변수 선언문을 실행
// 변수 x는 실행컨텍스트가 관리하는 스코프(렉시컬환경)에 등록되고 
// undefined로 초기화된다

// 소스코드 실행
// 변수 x가 선언된 변수인지 확인 후, 값을 할당한다

 

실행컨텍스트는

식별자(변수, 함수, 클래스 등)를 등록, 관리하는 스코프인 렉시컬 환경과

코드 실행 순서 관리를 구현하는 실행 컨텍스트 스택으로 구성되어 모든 코드를 관리하고 있다.

 

 

실행컨텍스트 스택

실행 컨텍스트는 스택(stack - 후입선출, LIFO-Last In First Out) 자료구조로 관리된다.

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

 

아래 코드에서 콘솔에 가장 먼저 출력되는 값은 무엇일까? 

===> 'foo함수 실행전'

 

const x = 1;

function foo(){
  const y = 2;
  console.log('foo실행중')

  function bar(){
    const z = 3;
    console.log(x+y+z, 'bar실행중')
  }
  bar()
}
console.log('foo함수실행전')
foo()

실행 컨텍스트 스택

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

• 자바스크립트 엔진은 전역코드를 평가하여 전역 실행컨텍스트를 생성한다.
• 이때 전역변수 x와 전역함수 foo는 전역 실행컨텍스트에 등록된다.
• 이후 전역 코드가 실행, 콘솔에 'foo함수 실행전'이 출력, foo함수가 실행된다

 

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

• 전역함수 foo가 호출되면 코드의 제어권은 foo함수 내부로 이동한다.
• foo함수 내부의 코드를 평가하고 foo함수 실행컨텍스트를 생성한다.
• 이때 지역변수 y와 중첩 함수 bar가 실행컨텍스트에 등록된다.
• 이후 foo함수 코드가 실행, 지역변수 y의 값이 할당, 콘솔에 'foo실행중' 출력, 중첩함수 bar가 호출된다

 

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

• 중첩함수 bar가 호출회면 foo의 함수는 일시 중단되고 bar함수 내부를 읽기 시작한다.
• bar함수 내부의 코드를 평가하고 bar함수 실행 컨텍스트를 생성한다
• 이때 지역변수 z가 실행컨텍스트에 등록된다.
• 이후 bar코드가 실행되며  지역변수 z에 값이 할당, 콘솔에 6, bar실행중을 출력, bar함수는 종료.

 

4. foo함수 코드로 복귀

• bar함수 종료 후, bar함수 컨텍스트를 실행 컨텍스트 스택에서 제거
• foo함수 종료

 

5. 전역 코드로 복귀

• foo 함수 종료 후, foo함수 컨텍스트를 실행컨텍스트 스택에서 제거
• 더 이상 실행할 전역 코드가 남아있지 않으므로 전역 실행컨텍스트도 스택에서 제거한다

 

 

렉시컬 환경

식별자와 식별자에 바인딩 된 값, 상위 스코프에 대한 참조를 기록하는 자료구조이다.

실행컨텍스트 스택이 코드의 실행 순서를 관리한다면, 렉시컬환경은 스코프와 식별자를 관리한다.