[JavaScript] 실행 컨텍스트로 살펴보는 호이스팅

실행 컨텍스트 (Execution Context)

JS 코드를 실행하는 데 필요한 환경을 제공하는 객체
식별자를 효율적으로 결정할 수 있도록 도와줌

 

 

실행 컨텍스트 구조

실행 컨텍스트 구조 (출처: https://intellegibilisverum.tistory.com)

생성 단계 (Creation Phase)

JS 코드를 실행하면, JavaScript 엔진은 CallStack에 전역 실행 컨텍스트 한 칸 생성
→ 전체 코드 스캔
→ 선언문이 있으면 실행
→ 환경 레코드(Environment Record)에 식별자를 기록

실행 단계 (Execution Phase)

선언문 외 나머지 코드 순차적으로 실행
→ 환경 레코드 참조
→ 환경 레코드의 식별자 정보에 변경사항이 있으면 업데이트

 

실행 컨텍스트 작동 시 Call Stack 구조

 

일시적 사각 지대 (TDZ, Temporal Dead Zone)

let, const로 선언했을 때, 선언 이전에 식별자를 참조할 수 없는 구역

let name;
console.log(name) // RefereceError 발생 : TDZ에 있기 때문

일시적 사각지대가 발생하는 이유

var은 선언과 동시에 초기화가 이뤄지지만, let/const는 선언만 이뤄질 뿐 초기화가 이뤄지지 않는다.
변수가 선언될 때, JS 엔진 코드는 다음과 같은 함수를 작동시킨다.

• var : AllocateTo 함수를 통해 메모리 할당 받음
• let/const: set_initializer_position 함수를 통해 초기화 포지션만 세팅, 메모리 할당하지 않음

let/const는 일종의 방어 코드를 통해 메모리를 할당받지 않기 때문에, 선언만 될 뿐 초기화가 이뤄지지 않는 것이다.


이렇게 var와는 차별화되는 let과 const를 추가한 것은, JavaScript도 이제 '선언문 이전에는 변수를 참조할 수 없다'는 일반적인 프로그래밍 방식을 추구할 수 있도록 보완한 것이라고 볼 수 있다.




참조
https://www.youtube.com/watch?v=EWfujNzSUmw&t=4s
https://velog.io/@ggong/let-const%EB%8A%94-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85-%EB%90%98%EC%A7%80-%EC%95%8A%EB%8A%94%EB%8B%A4
https://careerly.co.kr/comments/68614?from=comment&section=top10&order=4