sharingStorage

모던 자바스크립트 23장 실행 컨텍스트 본문

Front-End/모던 자바스크립트 Deep Dive

모던 자바스크립트 23장 실행 컨텍스트

Anstrengung 2022. 6. 29. 14:12

실행 컨텍스트는 자바스크립트 동작 원리를 담고 있는 핵심 개념이다. 실행 컨텍스트를 바르게 이해하면 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값을 관리하는 방식과 호이스팅이 발생하는 이유, 클로저의 동작 방식, 그리고 태그스 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식을 이해할 수 있다. 

 

23.2 소스코드의 평가와 실행

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

 

소스코드 평가 과정에서는 실행 컨텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프에 등록한다.

이 후 선언문을 제외한 소스코드가 순차적으로 실행되기 시작하는데 이것이 런타임이 시작되는 것이다.

 

 

23.3 실행 컨텍스트의 역할

실행 컨텍스트는 식별자를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘으로, 모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다.

 

실행 컨텍스트 스택은 코드의 실행 순서를 관리하며 스택의 최상위에 존재하는 실행 컨텍스트는 언제나 현재 실행 중인 코드의 실행 컨텍스트이다.

 

 

23.6.2 전역코드 평가

전역 코드 평가는 다음과 같은 순서로 진행된다.

  1. 전역 실행 컨텍스트 생성
  2. 전역 렉시컬 환경 생성
  3. 전역 환경 레코드 생성
  4. 객체 환경 레코드 생성
  5. 선언적 환경 레코드 생성
  6. this 바인딩 
  7. 외부 렉시컬 환경에 대한 참조 결정

 

1. 전역 실행 컨텍스트 생성 

비어있는 전역 실행 컨텍스트를 생성하여 실행 컨텍스트 스택에 푸쉬하고 이는 스택의 최상위, 실행 컨텍스트가 된다.

 

2. 전역 렉시컬 환경 생성

전역 렉시컬 환경을 생성하고 전역 실행 컨텍스트에 바인딩한다.

렉시컬 환경은 환경 레코드와 외부 렉시컬 환경에 대한 참조로 구성된다.

 

3. 전역 환경 레코드 생성

var키워드로 선언한 전역변수와 ES6의 let, const로 선언한 전역변수를 구분하여 관리하기 위해 전역 스코프 역할을 하는 전역 환경 레코드는 객체 환경 레코드선언전 환경 레코드로 구성되어 있다.

 

4. 객체 환경 레코드 생성

전역 환경 레코드를 구성하는 컴포넌트 객체 환경 레코드는 BindingObject라고 부르는 객체와 연결된다.

전역 코드 평가 과정에서 var키워드로 선언한 변수와 함수 선언문으로 정의된 전역 함수는 전역 환경 레코드의 객체 환경 레코드에 연결된 BindingObject를 통해 전역 객체의 프로퍼티와 메서드가 된다. 그리고 이때 등록된 식별자를 전역 환경 레크도의 객체 환경 레코드에서 검색하면 전역 객체의 프로퍼티를 검색하여 반환한다.

 

이것이 var 키워드로 선언된 전역변수와 함수선언문으로 정의된 전역 함수가 전역 객체의 프로퍼티와 메서드가 되고 전역 객체를 가리키는 식별자 없이 전역 객체의 프로퍼티를 참조할 수 있는 메커니즘이다.

window를 사용하지 않아도 참조할 수 있다.

 

var 키워드로 선언한 변수는 "선언 단계"와 "초기화 단계"가 동시에 진행된다.

따라서 var 키워드로 선언한 변수는 코드 실행 단계에서 변수 선언문 이전에도 참조할 수 있고 이것이 변수 호이스팅이 발생하는 원인이다.

 

5.선언적 환경 레코드 생성

var 키워드로 선언한 것이 아닌, 즉  let, const 키워드로 선언한 전역 변수는 선언적 환경 레코드에 등록되고 관리된다.

let, const로 키워드로 선언한 변수는 개념적인 블록 내에 존재하게 된다고 했는데 이 블록이 바로 전역 환경 레코드의 선언적 환경 레코드이다.

 

let, const 키워드로 선언한 변수도 호이스팅이 발생하지만 런타임에 컨트롤이 변수 선언문에 도달하기 전까지 일시적 사각지대에 빠지기 때문에 참조할 수 없다. 

 

6. this 바인딩

전역 환경 레코드의 [[GlobalThisValue]] 내부 슬롯에 this가 바인딩된다.

따라서 전역 코드에서 this를 참조하면 전역 환경 레코드의  [[GlobalThisValue]] 내부슬롯에 바인딩되어 있는 객체가 반환된다.

 

 

7. 외부 렉시컬 환경에 대한 참조 결정

현재 평가 중인 소스코드는 전역코드다.

전역 코드를 포함하는 소스코드는 없으므로 전역 렉시컬 환경의 외부 환경에 대한 참조에 null이 할당된다.

 

 

 

 

 

 

 

 

 

 

 

 

 

Reference 

  • 모던 자바스크립트 Deep Dive

 

Comments