[JavaScript] Execution Context 실행 컨텍스트

실행 컨텍스트

자바스크립트 코드가 실행되는 환경. 동작 원리를 담고 있다.

- 스코프를 기반으로 식별자와 식별자 바인딩을 관리하는 방식을 이해

- hoisting 발생 이유 이해

- closure의 동작 방식 이해

- task queue와 함께 동작하는 이벤트 핸들러와 비동기 처리 동작방식 이해

 

소스코드 평가 과정

모든 소스코드는 실행에 앞서 평가 과정을 커치며 코드를 실행하기 위한 준비를 한다.

 

1. 소스코드의 평가

• 실행 컨텍스트를 생성하고 편수, 함수 등의 선언문만 먼저 실행
• 생성된 변수나 함수 식별자를 key로 실행 컨텍스트가 관리하는 스코프에 등록
  • 스코프 => 렉시컬 환경의 환경 레코드

2. 소스코드 실행 과정

• 평가 과정이 끝난 후 선언문을 제외하고 소스코드가 순차적으로 실행 = 런타임
• 실행에 필요한 정보, 즉 변수나 함수의 참조를 실행 컨택스트가 관리하는 스코프에서 검색해서 가져옴
• 변수 값의 변경 같은 것도 다시 실행 컨텍스트가 관리하는 스코프에 등록된다.

<example>

var x; x = 1;

먼저 소스코드 평가 과정에서 선언문 var x;를 먼저 실행한다.

변수 식별자 x는 실행 컨텍스트가 관리하는 스코프에 등록되고 undefined로 초기화된다.

평가 과정이 끝나면 소스코드 실행 시작.

할당문 x = 1; 실행하고 스코프에 x 변수가 등록 되어있는지 확인한다.

등록되어 있다면 값을 할당하여 할당 결과를 실행 컨텍스트에 등록하여 관리한다.

 

Stack

전역 실행 컨텍스트를 생성하며 생성된 실행 컨텍스트는 stack 자료구조로 관리한다. => 실행 컨텍스트 스택

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

 

Lexical Environment

스코프를 구분하여 식별자를 등록하고 관리하는 저장소

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

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

• Global Lexical Env 
  • x : 1
  • foo : <function object>
• foo Lexical Env
  • y : 2