[Javascript] 2. Execution Context (Part 1)

Execution Context 개요

Javascript의 동작 원리를 담고있는 핵심 개념.
Scope를 기반으로 Identifier와 Binding을 관리하는 방식, Hoisting의 발생 이유, Closure의 동작 방식, Event Handler와 Asynchronous한 처리의 동작 방식들을 이해할 수 있다!

Source Code의 Type

아래 4가지 유형의 source code는 execution context를 생성함
각 Type에 따라 Execution context를 생성하고 관리하는 내용이 다름

1. Global code
   • Global에 존재하는 source code
   • 함수, 클래스 등의 내부 코드는 포함 됨
   • 전역 변수를 관리하기 위해 전역 스코프 생성 (최상위 스코프)
   • var로 선언된 전역변수와 전역 함수를 전역 객체의 property와 method로 바인딩하고 참조하기 위해 전역 객체와 연결
   • Global code가 평가되면 global execution context가 생성됨
2. Function code
   • 함수 내부에 존재하는 source code
   • 중첩 함수, 클래스 등 내부 코드는 포함 X
   • local scope 생성 및 local variable, function parameter, arguments 객체 관리
   • 생성한 지역 스코프를 전역 스코프에서 시작하는 scope chain의 일원으로 연결
   • function code가 평가되면 function execution context가 생성됨
3. Eval code
   • eval 함수로 전달되어 실행되는 코됨
   • strict mode에서 독자적인 scope 생성
   • eval code가 평가되면 eval execution context가 생성됨
4. Module code
   • 모듈 내부에 존재하는 source code
   • 함수, 클래스 등의 내부 코드는 포함 됨
   • module별로 독립적인 module scope 생성
   • module code가 평가되면 module execution context가 생성됨

Source code의 평가와 실행

Javascript는 소스코드를 평가와 실행 과정으로 나누어 처리

1. 소스코드 평가 과정
   • Execution context 생성, 선언문만 먼저 실행
   • 생성된 식별자를 key로 execution context가 관리하는 스코프(lexical 환경의 환경 레코드)에 등록
2. 소스코드 실행 과정
   • Runtime 시작 : 선언문을 제외한 소스코드를 순차적으로 실행
   • execution context가 관리하는 스코프에서 변수 및 함수 참조
   • 값의 변경 등의 실행 결과는 다시 execution context가 관리하는 스코프에 등록

ex) 실행 예시

var x;
x = 1;

• 소스코드 평가 과정
  • var x; 실행
  • undefined로 초기화
  • execution context가 관리하는 스코프에 식별자 x 등록
• 소스코드 실행 과정
  • 선언문은 평가과정에서 이미 실행되었으니 처리 X, 할당문만 실행
  • 등록된 변수라면 값을 할당하고 할당 결과를 execution context에 등록해 관리
  • 할당문에 사용된 식별자가 등록되어있는지 확인 -> execution context가 관리하는 스코프에 x가 등록되어 있는지 확인

Source code 실행을 위한 조건

1. 선언에 의해 생성된 모든 식별자는 스코프를 구분해 등록하고 값의 변화(상태 변화)가 지속적으로 관리되어야 함
2. 중첩 관계에 의해 스코프 체인을 형성해야 함 -> 스코프 체인을 통해 상위 스코프로 이동하며 식별자를 검색할 수 있어야 함
3. 현재 실행 중인 코드의 실행 순서함 변경할 수 있어야 하며(함수 호출 등), 다시 돌아갈 수 있어야 함

Execution context의 역할

Source code 실행 조건은 Execution context에 의해 관리됨

1. 소스코드를 실행하기 위한 환경을 제공하고, 코드의 실행 결과를 관리
2. 식별자를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 매커니즘으로, 모든 코드는 Execution context를 통해 실행 및 관리됨

Execution Context의 Source Code 평가 및 실행 예시

// Global variable
const a = 3;
const b = 6;

function test(n) {
	const a = 1;
    const b = 2;
    console.log(n + a + b);
}

test(10);

console.log(a + b);

1. Global code 평가
   • 실행 전 평가 과정을 거침, 평가 과정에서는 선언문만 먼저 실행
   • 변수 선언문과 함수 선언문만 먼저 실행
     -> global a, b, test 할당
   • 생성된 전역 변수 및 함수가 execution context가 관리하는 전역 스코프에 등록됨
   • 전역 변수 및 함수는 전역 객체의 property와 method가 됨
2. Global code 실행
   • 평가과정이 끝난 후 Runtime 시작
   • 값의 할당 및 함수 호출
   • 함수 호출 시 Global code 일시 중단 후 실행 순서를 함수 내부로 변경
     -> test(10);부터 Global code 일시 중단, 실행 순서 변경
3. Function code 평가
   • 함수 내부 진입 시 실행 전 함수 코드 평가 과정을 거침
   • parameter와 local variable 선언문 먼저 실행
     -> local a, b 할당
   • 생성된 매개변수와 지역변수가 execution context가 관리하는 지역 스코프에 등록됨
   • this 바인딩 결정
4. Function code 실행
   • Runtime 시작, 함수 코드 실행
   • 매개변수와 지역 변수에 값 할당
   • 지역 스코프에 없는 식별자는 스코프 체인을 통해 검색
     (해당 예시는 console이 global scope의 property)
     -> 함수 코드의 지역 스코프는 상위 스코프와 연결되어야 함 (전역 스코프)
   • 객체 또는 module의 메소드는 해당 객체의 프로토타입 체인을 통해 검색
     ( 해당 예시는 console.log method를 검색, 해당 함수의 평가 및 실행은 위 과정과 동일)
5. Function 종료
   • 함수 호출 이전으로 되돌아가기 위해 현재 실행 중인 코드와 이전에 실행하던 코드를 구분해 관리함
   • 함수 호출 이전으로 되돌아가 전역 코드 이어서 실행

결국 위 모든 과정은 Execution Context가 관리함
Execution context가 식별자와 스코프, 코드 실행 순서를 관리하기 위해 사용하는 구성 요소와 과정은 이어서...