실행컨텍스트(스코프, LE, VE)

실행 컨텍스트란?

실행 컨텍스트(execution context)는 자바스크립트의 동작 원리를 이해하는 데 중요한 개념이다. 실행 컨텍스트는 코드가 실행되는 환경을 제공하며, 변수, 함수 선언 및 스코프 체인 등을 관리한다.

이를 이해하면 스코프 기반으로 식별자와 식별자 바인딩을 관리하는 방식과 호이스팅이 발생하는 이유, 클로저의 동작 방식, 태스크큐와 함께 동작하는 이벤트 핸들러와 비동기 처리 방식을 이해할 수 있다.

자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 해당 역할들을 수행한다.

• 선언된 변수를 위로 끌어올린다. (호이스팅)
• 외부 환경 정보를 구성한다. (LexicalEnvironment, VariableEnvironment)
• this 값을 설정한다. (ThisBinding)

이로 인해 자바스크립트에서는 특이한 현상들이 발생한다.

실행 컨텍스를 이해하기 위해서는 먼저 ‘콜 스택’을 이해해야 한다.

💡 콜스택(call stack)
함수가 호출되면 동일 환경에 있는 코드를 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 콜스택에 쌓아올린다. 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장할 수 있다.

VariableEnvironment(VE)

VE, LE 의 구성요소는 동일하며 record, outer로 구성되어 있다.

• 현재 컨텍스트 내의 식별자 정보(environmentRecord = record)
• 외부 환경 정보(outerEnvironmentReference = outer)

VE, LE는 스냅샷 유지여부로 구분된다.

• VE는 스냅샷을 유지(=실시간으로 변경되지 않음)
• LE는 스냅샷을 유지하지 않고 실시간으로 변경사항을 계속해서 반영한다.

즉, 실행 컨텍스트를 생성할 때 VE에 정보를 먼저 담은 다음, 이를 복사해 LE를 만들고 주로 LE를 활용한다.

2-3 LexicalEnvironment(LE)

environmentRecord(=record)

• 현재 컨텍스트와 관련된 코드의 식별자 정보들을 저장(수집) (=기록)
  • 코드가 수집되는 것이지 실행되는 것이 아니다.
• 수집 대상 정보 : 함수에 지정된 매개변수 식별자, 함수 자체, var로 선언된 변수 식별자 등
• 컨텍스트 내부를 처음부터 끝까지 순서대로 훑어가며 수집

호이스팅(hoisting)

• 변수정보 수집을 모두 마쳤더라도 아직 실행 컨텍스트가 관여할 코드는 실행 전의 상태이다.(JS 엔진은 코드 실행 전 이미 모든 변수정보를 알고 있는 것)
• 변수 정보 수집 과정을 이해하기 쉽게 설명한 ‘가상 개념’

2-4 this

this 식별자가 바라보는 객체

2-5 정리

• 실행 컨텍스트 : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체실행 컨텍스트 객체는 활성화 되는 시점에 VariableEnvironment, LexicalEnvironment, ThisBing의 세가지 정보를 수집함
• VariableEnvironment와 LexicalEnvironment는 실행 컨텍스트가 생성될 때 동일한 내용으로 구성되지만 LexicalEnvironment는 함수 실행 중 변경 사항이 반영되고 VariableEnvironment는 초기 상태를 유지한다.
• VariableEnvironment와 LexicalEnvironment는 environmentRecord와 outerEnvironment로 구성돼 있다.
• environmentRecord : 매개변수명, 변수의 식별자, 선언한 함수의 함수명들을 수집한다.
• outerEnvironment : 직전 컨텍스트의 LexicalEnvironment 정보를 참조한다.
• 호이스팅은 environmentRecord의 수집 과정을 추상화한 개념으로, '선언부에 있는 정보'를 수집하는 environment의 동작과 '선언부 끌어올림'을 연결해서 이해하자.
• 함수 선언문은 함수 호이스팅의 대상으로 함수 표현식과 차이가 발생한다.
• 스코프 : 변수의 유효범위
• 안전한 코드 구성을 위해 가급적 전역변수의 사용은 최소화하는 것이 좋다.

[출처] 코어자바스크립트, 정재남