[JS] 실행 컨텍스트

실행 컨텍스트

1. 실행 컨텍스트란?

실행 컨텍스트(Execution Context)는 실행 중인 자바스크립트 코드의 실행 환경을 추상화한 객체이며, 코드가 호출 될 때마다 자바스크립트는 실행 컨텍스트를 생성하고 이를 스택 구조로 관리한다.

- 새로운 컨텍스트가 생성되면 실행 컨텍스트에 push (가장 상위에 위치)

- 실행이 종료되면 pop하여 작업을 마친 컨텍스트를 제거

- 스택의 가장 위의 컨텍스트가 현재 실행 중인 코드의 환경

 

2. 실행 컨텍스트의 내부 구성

- 렉시컬 환경 (Lexical Environment) : 현재 컨텍스트의 변수, 함수 선언 등을 저장하는 구조

- 환경 레코드 (Environment Record) : 실제 식별자와 값을 저장하는 객체

- 외부 렉시컬 환경 참조 (outer) : 상위 스코프와 연결(단방향 연결 리스트가 됨)

- this 바인딩 : 현재 실행 문맥에서의 this를 정의

이 요소들이 결합되어 스코프 체인을 구성하고 변수 참조 시 상위 컨텍스트를 참조함.

 

3. 전역 실행 컨텍스트

실행 컨텍스트는 가장 먼저 전역 컨텍스트를 생성한다. 따라서 전역 컨텍스트는 실행 컨텍스트의 가장 아래에 위치하고, 프로그램의 시작점이자 최종 참조 지점이 된다. (outer가 null이기 때문에.) 전역 컨텍스트에는 자바스크립에서 기본으로 내장해 주는 빌트인 객체와 메서드를 포함하고 있기 때문에, 다른 컨텍스트에서 전역 실행 컨텍스트를 통해 참조하게 된다.

 

4. 실행 컨텍스트와 호이스팅

컨텍스트가 생성될 때 자바스크립트 엔진은 소스코드를 선언 단계와 실행 단계로 나누어 처리하는데, 선언 단계에서는 먼저 var, let, const 등으로 정의된 변수와 정의된 함수를 찾는다. 최초에는 변수의 선언과 이름을 인지하고 환경 레코드에 넣지만, 실제로 그 구문을 읽기 전까지는 var는 undefined, let, const는 uninitialized가 된다. 이 차이는 let과 const는 TDZ(Temperal Dead Zone)에 들어감으로써 실제로는 실행 컨텍스트에 들어가 있지만 참조할 수 없는 상태라는 의미이다. 이 상태에서 함수를 호출했을 때가 호이스팅되는 것처럼 보이는 것이다. let, const는 실제로는 호이스팅 되고 있지만 참조를 막고 있는 상태인 것이다.

 

함수의 호이스팅은 변수와 다르게 전체 구문이 '값'으로 초기화된 것처럼 끌어올려진다. 따라서 선언부 이전에 호출되더라도 변수와 다르게 undefined나 오류를 출력하지 않는다. 함수 컨텍스트는 선언 단계가 아닌 실행 단계에 함수가 호출됨으로써 생성되고, 그 안의 렉시컬 환경을 형성한다.

 

5. 함수 실행 컨텍스트

함수 컨텍스트를 생성할 때는 실행 컨텍스트의 가장 상위 요소로 push되며, 상위 컨텍스트는 실행 주체를 하위 함수 컨텍스트로 넘겨준다. 전역 컨텍스트와 유사한 방식으로 함수 내부에서 환경 레코드를 생성하며, 특별히 알아야 할 점은 상위 컨텍스트의 환경 레코드와 스코프 체이닝 된다는 것이다.

 

6. 스코프 체인과 outer 참조

실행 컨텍스트는 단방향 연결 리스트로 이루어진 스코프 체인을 구성한다. 각 컨텍스트의 렉시컬 환경은 자신이 정의된 시점에서의 상위 환경(outer)를 기억하고 있으며, 이것이 스코프 체이닝을 구성한다. 실행 중인 컨텍스트에서 변수나 함수를 찾지 못했을 때, 상위 요소에서 찾으며, 최종적으로 전역 컨텍스트까지 올라가게 된다.

 

7. 마무리

클로저 개념, 렉시컬 환경, [[Environment]] 내부 슬롯, this 바인딩 등의 근본이 되는 개념이라 비슷한 표현이 덕지덕지 붙어있다. 추가로 공부하면 좋을 내용인 것 같다. 좀 어려워서 내 언어로 쓰는 데 어렵긴 했다.