🤔 실행 컨텍스트
실행할 코드에 제공할 환경 정보들을 모아놓은 객체
이 컨텍스트는 코드 실행에 필요한 여러 가지 정보를 담고 있으며, 주로 다음과 같은 상황에서 생성된다.
① 전역 공간 : 자바스크립트 코드가 실행되는 순간에 전역 컨텍스트가 생성된다. 이는 코드 실행의 기본적인 컨텍스트를 제공한다.
② 함수 : 자바스크립트의 독립된 코드 뭉치인 함수가 호출될 때 해당 함수의 실행 컨텍스트가 생성된다. 이는 함수의 지역 변수, 매개변수, 및 함수의 실행 관련 정보를 포함한다.
③ module : 모듈이 import 되는 순간에 모듈 내부에 있는 컨텍스트가 생성된다.
④ eval() : eval() 함수가 호출될 때마다 해당 코드 조각의 실행 컨텍스트가 생성된다.
⑤ block(ES6) : ES6부터 도입된 블록 레벨 스코프인 block 내부에서 변수의 실행 컨텍스트가 생성된다.
- 조건문과 반복문의 블록 스코프 내에서 변수가 선언되더라도 실행 컨텍스트가 새로 생성되지 않는다.
- 실행 컨텍스트는 주로 함수에 의해 생성되며, 이러한 함수 호출에 따라 Call Stack에 쌓인다.
- Call Stack : 현재 어떤 함수가 동작 중인지, 다음에 어떤 함수가 호출될 예정인지 등을 제어하는 자료구조로서 코드 실행 중에 생성되거나 소멸된다. 함수가 호출될 때마다 해당 함수의 실행 컨텍스트가 스택에 쌓이고, 함수의 실행이 완료되면 해당 컨텍스트가 스택에서 제거된다.
- 조건문과 반복문은 블록 스코프를 제공하지만,
실행 컨텍스트를 새로 생성하지 않기 때문에 Call Stack에 영향을 주지 않는다.
- 조건문과 반복문은 블록 스코프를 제공하지만,
var x = 'xxx';
function foo () {
var y = 'yyy';
function bar () {
var z = 'zzz';
console.log(x + y + z);
}
bar();
}
foo();
🤔 실행 컨텍스트를 구성할 때 수집하는 세 가지 환경 정보
컨텍스트 생성 시 ①과 ②는 같은 내용으로 구성된다.
① Variable Environment
- 현재 컨텍스트 내의 식별자에 대한 정보 수집
- 최초 실행 시의 Lexical Environment 스냅샷을 유지(변경 사항 반영 X)
- 주로 스냅샷을 유지하여 변수에 접근할 때 사용
② Lexical Environment
- environmentRecord와 outerEnvironmentReference로 구성
- 각 식별자의 데이터 추적
- 변경 사항 실시간 반영
- Hoisting 발생
- Scope Chain 형성
③ thisBinding
- this 식별자가 바라보고 있는 대상 객체
- 주로 함수가 어떤 객체를 가리키는지를 결정하는 데 사용
🔍 Lexical Environment (사전적 환경)
: 실행 컨텍스트를 구성하는 환경 정보들을 모아 사전처럼 구성한 객체이다. 실행 컨텍스트의 스코프, 식별자에 대한 정보를 담고 있어 자바스크립트 엔진이 변수 및 함수의 유효 범위를 파악하고 코드를 실행할 수 있도록 돕는다.
① environmentRecord (환경 기록)
- 현재 컨텍스트의 식별자 정보 저장 (매개변수 식별자, 함수, 함수 內 변수)
Hoisting이 발생하는 곳으로, 식별자 정보를 실행 컨텍스트의 맨 위로 끌어올려 코드 해석을 쉽게 돕는다.
=> 변수 선언부와 함수 선언문에 대한 호이스팅 발생
(함수 표현식 사용 시 함수의 선언부만 호이스팅)
=> Lexical Environment를 구성하는 과정 중 가장 먼저 수행되며, 실행 컨텍스트가 생성될 때 초기화
② outerEnvironmentReference (외부 환경 참조)
- 현재 실행 컨텍스트의 외부 환경을 참조하는 포인터(상위의
LexicalEnvironment에 대한 참조) - 외부 식별자 정보를 현재 컨텍스트 관련된 범위 내에서 사용할 수 있도록 한다.
Scope Chain을 통해 상위 컨텍스트에 접근한다. (scope=식별자의 유효 범위)
=> 식별자의 유효범위를 결정하고, 스코프 내에서 바깥으로 검색해나는 것- 여러 스코프에 동일한 식별자를 선언할 경우,
scope chain상에서 가장 먼저 발견된 식별자에만 접근 가능
=>shadowing: 가장 가까운 범위에서 선언된 식별자가 사용
코어 자바스크립트 2강 실행 컨텍스트
Cho