[JavaScript] 실행 컨텍스트
자바스크립트 실행 컨텍스트(Execution Context)란?
한 마디로 '코드를 실행하는데 필요한 환경을 제공하는 객체'라고 할 수 있다.
실행 컨텍스트를 이해하기 위해서는 우선, 실행 컨텍스트가 어떻게 구성되어 있는지를 살펴봐야 한다.
실행 컨텍스트는 아주 빵빵한 구조이지만, 오늘은 여기서 environmentRecord 와 outer-EnvironmentReference 두 가지에 집중해서 살펴볼 것이다.
1. Record로 자바스크립트 호이스팅 이해하기
- environmentRecord
: 매개변수명, 변수의 식별자, 선언한 함수의 함수명 등을 수집 - 호이스팅(Hoisting) : 선언문이 마치 최상단에 '끌어올려진' 듯한 현상
console.log(a); // undefined → 선언 라인 위에서 출력해도 에러가 나지 않고 변수를 참조한다.
var a = 'Hello';에러가 발생하지 않는 이유는 자바스크립트 엔진이 먼저 전체 코드를 스캔하면서 변수 같은 정보를 실행 컨텍스트 어딘가에 미리 기록해놓기 때문인데, 이 때 기록해놓는 곳이 environmentRecord 이다.
-
Variable Hoisting
- var : undefined로 값을 초기화함
- let, const : 엔진이 식별자를 기록해두긴 하지만, 값을 초기화하지 않는다. 그러므로 위의 예시처럼 선언 라인 위에서 출력하면 'Reference Error' 가 발생한다. ➡️ 선언 이전에 식별자를 참조할 수 없는 구역을 Temporal Dead Zone
-
Function Hoisting
-
함수 표현식(Function Expression) : 변수 호이스팅과 동일하게 동작
-
함수 선언문(Function Declaration) : 자바스크립트 엔진이 함수의 선언과 동시에 완성된 함수 객체를 생성해서 environmentRecord에 기록 → 선언 전에도 함수를 사용할 수 있음
-
2. Outer로 자바스크립트 스코프체이닝 이해하기
- outer-EnvironmentReference : 바깥 Lexical Environment를 가리킴
- 스코프 체인(Scope Chain) : 식별자를 결정할 때 활용하는 스콜프들의 연결 리스트
- 스코프체이닝(Scope Chaining) : 식별자를 결정하기 위해 타고 타고 가서 찾는 과정
/* Global */
let lamp = false;
function goTo2F () {
let lamp = true;
function goTo3F () {
let pet = 'puppy';
console.log(pet); // puppy
console.log(cat); // error → 현재 활성화된 실행 컨텍스트 환경 레코드에 cat이 없으므로 자바스크립트 엔진은 outer를 타고 바깥 렉시컬 환경으로 가서 cat을 찾기 시작한다.
console.log(lamp); // true
};
goTo3F();
console.log(lamp);
}
goTo2F();
✏️ 여기서 주목!
2층에서 이미 램프를 찾았기 때문에 더 이상 1층으로 내려가서 찾아보지 않는다. 1층과 2층의 램프가 같은 이름이므로 즉, 식별자가 같기 때문에 1층 램프의 온/오프 여부는 2층 또는 3층에서는 절대 알 수 없다.
이렇게 '동일한 식별자로 인해 상위 스코프에서 선언된 식별자의 값이 가려지는 현상'을 변수 셰도잉(Variable Shadowing) 이라 한다.
3. Execution Context 정리
코드를 실행할 때 식별자를 더욱 효율적으로 결정하기 위한 수단으로서, 필요한 정보를 한데 모아 제공하는 객체라고 정리할 수 있다!!
※ 참고 자료
코어 자바스크립트
https://www.youtube.com/watch?v=EWfujNzSUmw
