[JS]변수 선언의 실행 시점과 변수 호이스팅

📌 호이스팅

- 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징

 

예시

console.log(score); // undefined
var score; // 변수 선언문

- 인터프리터에 의해 한 줄 씩 순차적으로 실행된다면, 아직 선언되지 않은  socre변수를 콘솔에 출력하고자 하고 있으므로, ReferenceError(참조에러)가 떠야함

- 하지만, 에러가 발생하지 않고 undefined가 출력됨

- 자바스크립트 엔진은 소스코드를 한 줄 씩 순차적으로 실행하기에 앞서, 먼저 소스코드의 평가 과정을 거치면서 소스코드를 실행할 준비를 함

- 소스코드 평가 과정에서 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아서 먼저 실행

- var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자(변수, 함수, 클래스)등은 호이스팅됨

- const, let은 var의 호이스팅과는 다르게 동작하며, TDZ(Temporal Dead Zone) 이라는 현상을 가지고 있다.

 

📌 변수가 생성되는 3단계

1. 선언 단계

• 변수를 실행 컨텍스트의 변수 객체에 등록

 

2. 초기화 단계

• 변수 객체 등록된 변수를 위한 공간을 메모리에 확보. 이 단계에서 변수는 undefined로 초기화

 

3. 할당 단계

• undefied로 초기화된 변수에 실제 값을 할당

 

* 일시적 사각지대(let, const의 호이스팅과 연관)

선언 단계

일시적 사각지대(TDZ)

초기화 단계

할당 단계

 

📌 let에서의 호이스팅

console.log(foo);
let foo;
//foo is not defined

- 선언단계에서 초기화 단계 이전까지 일시적 사각지대가 있어서, 초기화 이전에 변수에 접근하려고 하면 참조 에러가 발생.

- 따라서, const,let 은 변수를 선언하기 전에 변수에 접근해도 에러가 나지 않던 현상을 차단해서 호이스팅이 일어나지 않는 것 처럼 보인다.

- 하지만 그렇지 않다. 아래 예제를 참고

let foo = 1; //전역 변수
{
  console.log(foo); // ReferenceError: foo is not defined
  let foo = 2; //지역 변수
}

- 호이스팅이 정말 발생하지 않는다면, 전역 변수 foo 값이 출력될 것 처럼 보임. 하지만 여전히 호이스팅이 있기 때문에 참조 에러 발생

- let으로 선언된 변수는 블록 레벨 스코프이므로, 지역 변수 foo가 일시적 사각지대에 빠짐. 따라서 일시적 사각지대 형태로 호이스팅이 발생한다고 생각하면 됨.

 

참고

1. 이웅모, 모던 자스 딥다이브

2. poiemaweb, let const와 블록 레벨 스코프

https://poiemaweb.com/es6-block-scope

let, const | PoiemaWeb

2. 제로초, const let

https://www.zerocho.com/category/ECMAScript/post/5757d74345041aaae7493479

https://www.zerocho.com/category/ECMAScript/post/5757d74345041aaae7493479