자바스크립트 세미나를 진행하던 도중 생긴 일이다.
let foo = 1; // 전역 변수
{
console.log(foo); // ReferenceError: Cannot access 'foo' before initialization
let foo = 2; // 지역 변수
}해당 코드에 대해서 이게 왜 참조오류가 발생하는 지에 대한 질문이 들어왔고, 나는 재선언 문제라고 생각했다. 이미 1번 줄에서 foo를 선언했는데, 4번 줄에서 또 선언하니까 오류가 생긴 게 아닐까?
그래서 'initialization', 초기화가 되지 않았다고 하는 것 같다고 했는데 오히려 멘티분께서 'TDZ 문제 아닌가요?' 라고 반문하셨다.
맞네.. 또 다른 foo가 선언된 것까지는 맞지만, 그게 오류의 이유라고 정확히 볼 순 없었다.
이 코드를 분석해보자면,
1. 전역으로 foo를 1로 선언
2. 블록 내에서 지역으로 foo를 2로 선언함
2-1. 2번의 내용이 전역의 foo를 가리게 됨
3. 지역 내의 console.log(foo) 호출 시, foo의 초기화가 이루어지지 않은 상태 (TDZ)
4. ReferenceError 발생
즉, 한 마디로
'블록 스코프 내의 foo는 선언과 동시에 TDZ에 들어갔던 것이고,
let foo = 2; 가 실행되기 전까지는 초기화되지 않기에 접근 시 에러가 발생한다'
🧐 TDZ가 뭔데?
그렇다면, TDZ가 뭘까?
TDZ(Temporal Dead Zone)는 '일시적 사각지대' 를 의미한다.
위에서 보았듯이, 변수 선언 및 초기화 이전의 공간이 만든 사각지대에서 일어나는 오류를 말한다.
TDZ가 일어난 상태에서 코드를 돌린다는 것은 곧 변수를 선언 및 초기화 하기 전에 사용하였단 의미로 해석된다. 그래서 아까 전에 본 오류 문구처럼
ReferenceError: Cannot access 'foo' before initialization
가 뜨게 되는 것이다. 초기화 하기 전이니까!
🚨 주의점
const, let, class 구문은 선언과 호출의 순서에 따라 TDZ가 일어나기 쉬우므로 늘 조심해서 사용해야 한다.
그러나, var, function, import는 영향을 받지 않는다.
