얼마 전에 면접을 준비하면서 호이스팅을 다시 한 번 개념 정리를 하는 시간을 가졌습니다. 면접 질문 리스트 중에 '호이스팅과 TDZ의 관계' 에 대해 설명하라는 질문이 있었습니다. TDZ는 생소한

얼마 전에 면접을 준비하면서 호이스팅을 다시 한 번 개념 정리를 하는 시간을 가졌습니다. 면접 질문 리스트 중에 '호이스팅과 TDZ의 관계' 에 대해 설명하라는 질문이 있었습니다. TDZ는 생소한 용어라서 구글링을 하다 해당 블로그 글을 보게 되었는데요, 글쓴이의 말처럼 저도 부끄러워졌습니다. 호이스팅은 var만 가능하다, 호이스팅은 스코프의 최상단으로 끌어올려져 변수를 참조 가능하다라고 알고 있었습니다. 하지만 호이스팅은 let, const 도 해당됩니다. 자바스크립트 엔진은 코드를 실행하기 전에 코드 실행에 필요한 모든 정보들을 수집하는 단계, 즉 실행컨텍스트를 생성하는 단계를 진행합니다. 수집하는 정보 중 하나가 변수 객체고 이 변수 객체에 스코프에 선언된 변수들을 담아둡니다. 여기서 '변수 선언'의 의미가 분명하게 들어납니다. 변수 선언은 'const, let, var 키워드와 변수를 작성한 것' 처럼 단순한 의미가 아니라 변수 객체에 담는다는 의미입니다. 이 과정이 호이스팅입니다. 그러면 왜 const, let은 스코프안에서 선언부 코드 이전에 접근하면 reference error를 내고 var는 그렇지 않을까요? 주의할 점은 선언이 곧 메모리 주소가 생겼다는 의미가 아니라는 점입니다. '변수 초기화'에서 메모리 주소가 생깁니다. var는 호이스팅 후 곧바로 undefined 값으로 초기화되지만 let과 const는 그렇지 않습니다. v8엔진 코드에서 kVar는 AllocateTo가 실행되지만 kConst와 kLet은 AllocateTo가 실행되지 않습니다(블로그에 자세한 코드가 나와있으니 참고해주세요!). 그래서 var는 메모리 주소가 있으니 선언부 코드 전에 접근이 가능하고 let, const는 메모리 주소가 없어서 reference error가 나는 겁니다. TDZ(Temporal Dead Zone)는 변수가 선언된 스코프 내에서 선언부 코드에 닿기 전까지의 코드 라인들로, 여기서 변수를 참조할 때 에러가 발생하는 개념적인 공간입니다. 위에 설명한 것과 연관지으면 let과 const는 호이스팅되지만 초기화가 이뤄지지 않아 TDZ에 영향을 받는다로 결론을 지을 수 있습니다. TDZ가 뭐야? 로 시작해서 호이스팅, 변수 선언과 초기화까지 잘못 알고 있던 개념을 바로 잡는 시간이 되었습니다. 이미 알고 있다고 생각한 개념도 몇 달에 한 번씩 다시 보는 습관을 들여야겠습니다.