호이스팅Hoisting과 일시적사각지대(TDZ, Tempolar Dead Zone)는 자바스크립트 변수의 선언 및 실행에 지대한 영향을 끼치기 때문에 꼭 이해가 필요하고, 기술 면접에서도 많이 물어보는 개념이다.
그렇다면 먼저, 호이스팅이 뭘까?
🔐Hoisting
호이스팅이란 모든 선언들을 해당 유효 범위(스코프*)의 최상단으로 끌어올리는 것을 의미한다.
자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const, function, class)을 호이스팅한다. 호이스팅이란 정확히 말하면, var 선언문이나 function 선언문을 해당 스코프의 최상단으로 옮긴 것처럼 동작하는 특성이다.
❗ let, const
let과 const는 호이스팅이 되지 않는다던데?
앞서 말했듯 let과 const에도 호이스팅이 일어난다. 하지만, TDZ에 의해 참조 에러가 발생할 뿐이다. 그렇다면 TDZ란 뭘까?
🔐TDZ(Tempolar Dead Zone)
TDZ는 단어 그대로 '일시적 사각지대'란 의미로, 스코프의 시작 지점부터 변수 및 함수의 선언 지점까지의 구간을 의미한다.
TDZ의 발생 이유는 자바스크립트 변수의 생성 과정에 대해 알면 직관적으로 이해가 가능하다. 자바스크립트에서 변수는 선언 -> 초기화 -> 할당 단계를 거쳐 생성이 된다.
1. 선언 단계 (Declaration phase)
변수를 실행 컨텍스트의 변수 객체에 등록하는 단계를 의미한다. 이 변수 객체는 스코프가 참조하는 대상이 된다.
2. 초기화 단계 (Initialization phase)
실행 컨텍스트에 존재 하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계. 이 단계에서 할당된 메모리에는 undefined로 초기화된다.
3. 할당 단계 (Assignment phase)
사용자가 undefined로 초기화된 메모리의 다른 값을 할당하는 단계.
즉,
- Var는 선언과 초기화가 동시에 이루어지므로 TDZ가 없이 undefined
- Let/const의 경우 선언과 초기화가 따로 진행되기 때문에 초기화 직전까지의 구간인 TDZ가 생기고, 그렇기에 호이스팅은 가능하지만 접근할 수는 없다.
- 함수선언식의 경우 선언, 초기화, 할당이 동시에 진행되기 때문에 호이스팅도 가능하고 실행도 가능하다.
- 실행 컨텍스트 : 코드가 실행되기 위해 필요한 환경
- 스코프 : 변수가 값을 참조할 때 접근할 범위
