실행 컨텍스트
💡 실행 컨텍스트(Execution Context) 생성과정에 대해 알아보자.
1. Creation Phase (실행컨텍스트 정의)
코드를 실행하기 위해 코드를 일종의 블록으로 나누는데, 그 코드 블록에 들어가 있는 변수, 함수, this, arguments 등에 대한 정보를 담고 있는 하나의 환경을 "Execution Context"라고 부른다
실행 컨텍스트가 정의될 때 변수에 따라 Lexical Enviroment에 정의가 될지, Variable Enviroment에 정의가 될 지 구분된다.
따라서 실행 컨텍스트 생성을 정의함에 앞서 변수의 생성에 대해 알 필요가 있다.
[0] 변수 생성 과정
변수 생성 과정에는 3개의 단계가 있다.
| 순 | 이름 | 내용 |
|---|---|---|
| 1 | Declaration phase(선언 단계) | 변수를 Execution Context의 Lexical Enviroment에 등록보다 정확히 Lexical Enviroment의 Declarative Enviroment Records에 등록됨 |
| 2 | Initialization phase(초기화 단계) | Lexical Enviroment에 등록되어있는 변수를 위하여 메모리를 할당하는 단계, 여기서 변수는 undefined로 초기화 됨 |
| 3 | Assignment phase(할당 단계) | 변수에 실제로 값이 할당되는 단계, undefined -> 특정 값 으로 할당 |
1번 선언단계와 2번 초기화단계 사이를 TDZ(Temporary Dead Zone) 이라고 하며, 선언만 되어있고 메모리 할당이 안되어있는 상태이므로 접근이 불가하다.
let, const는 1단계인 선언만 진행 (Lexical Enviroment)
var는 1, 2단계인 선언->초기화 단계까지 진행 (Variable Enviroment)
호이스팅은 1번 단계에서 발생하며 let, const도 선언단계는 거치므로 호이스팅은 일어남. 오류가 발생하는 이유는 TDZ의 영향을 받아 초깃값을 할당받지 못한 변수에 접근했기 때문이지 호이스팅이 일어나지 않은것은 아님.
이러한 차이점에 대해 알아두고,
Lexical Enviroment와 Variable Enviroment의 차이에 대해 알아보자.
[1] Lexical Enviroment
let, const에 대한 저장 환경이다.
Lexical enviroment는 (1)Enviroment Records와 (2)Outer Reference Enviroment로 구성되어 있다.
(1) Enviroment Records
현재 실행 컨텍스트에서 사용되는 식별자(variables, functions, parameters, classes, modules, properties, constants, labels, generics) 를 저장하고 관리
컨텍스트 내부 전체를 처음부터 훑어나가면서 순서대로 식별자 정보를 수집함
코드가 실행되기전에 자바스크립트 엔진은 이미 해당 컨텍스트의 변수(식별자)를 모두 파악하게 됨. 이를 호이스팅이라고 부름.
- Declarative Enviroment Records let, const로 선언된 변수, 함수선언문
- Object Enviroment Records 객체의 프로퍼티를 저장
(2) Outer Reference Enviroment
- 상위 실행컨텍스트(상위스코프)의 Lexical Enviroment가 저장된 곳이며 실행컨텍스트의 [[scope]] 속성이 상위스코프의 Lexical Enviroment 정보를 담고있다.
Outer Reference Enviroment === 상위스코프의 Lexical Enviroment === [[scope]]따라서 Outer Reference Enviroment를 통해서 상위스코프의 데이터를 참조할 수 있는 것임
- 단방향 링크드 리스트이다. 단방향이므로 한쪽방향, 현재 실행컨텍스트에서 상위 실행컨텍스트의 방향으로만 참조가 가능하며 함수의 로컬변수를 외부에서 접근할 수 없는 이유는 이 때문이다. 글로벌 실행컨텍스트의 Outer Reference Enviroment는 그 자체가 최상위이므로 더이상 참조할 상위스코프가 없기 때문에 당연히 null이다!
이렇게 어떤 실행컨텍스트의 Outer Reference Enviroment가 상위스코프의 Lexical Enviroment와 연결되어있는 것을 Lexical Nesting Structure라고함
[2] Variable Enviroment
var 변수를 저장하는 환경으로 Lexical Enviroment와 마찬가지로 렉시컬 환경이지만 let, const와 변수의 생성과정이 다르기 때문에 다르게 동작한다.
[3] 왜 Execution Context를 Lexical Environment와 Variable Environment로 구별지어 나눈 걸까?
- 값의 변화를 실시간으로 추적하는가
Variable Enviroment(var) -> 값 추적 X
Lexical Enviroment(let, const) -> 변경사항을 추적 - scope의 차이
let, const -> block scope
var -> function scope
2. Execution Phase (코드실행)
이 단계에서 변수할당이 이루어지고 코드가 실행되는 것으로, 위의 실행 컨텍스트에서 정의된 실행 컨텍스트에 값을 할당한다.
