호이스팅(Hoisting)이란?

 

 

📍호이스팅(Hoisting)이란? 

호이스팅이란 스코프 안에 존재하는 모든 선언들을 해당 스코프의 최상단으로 끌어 올리는 것을 말합니다. 

'Hoisting' 단어를 검색해 보면 그 뜻도 '끌어 올리기, 들어 올려 나르기'로 나오듯 호이스팅은 무언가를 끌어 올리는 행위입니다. 

 

자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수 값들을 모두 모아서 유효 범위의 최상단에 선언합니다. 즉, 함수 내에서 아래 쪽에 존재하는 내용 중 필요한 겂들을 끌어 올리는 것입니다. 

 

모든 선언은 (fuction, var, let, const, class) 호이스팅 됩니다. var는 선언과 동시에 초기화가 이루어져서 undefined로 할당 되지만, let 및 const 선언은 선언만 될 뿐, 메모리 할당이 아직 되지 않은 TDZ에 들어가게 됩니다.

 

❓TDZ란? 
Temporal Dead Zone의 약자로 한글로 직역하면 일시적 사각지대라는 뜻인데, 스코프의 시작 지점부터 초기화 시작 지점 까지의 구간을 TDZ라고 부릅니다. 즉 변수가 선언되고 변수의 초기화가 이루어지기 전까지의 구간이라고 말할 수 있습니다. 

 

호이스팅은 함수를 어디에 선언 하였든, 신경쓰지 않고 필요한 곳에서 자유롭게 사용하기 위해 만들어진 기능입니다. 그러나 때로는 의도치 않은 버그를 생성할 여지가 있기 때문에, 이를 의도적으로 사용하는 경우가 아니라면 호이스팅이 되지 않거나, TDZ로 초기화 되는 let, const, 함수 표현식을 사용하는 것을 권장합니다.

 

 

 

 

💟 꼬리 질문

🙋🏻‍♀️ 왜 let과 const만 TDZ가 적용되나요?

📝 이는 Javascript 변수 선언의 특성 때문인데, var와 let, const 변수 선언은 변수가 생성되는 시기와 초기화되는 시기에 차이가 있기 때문입니다. var는 변수가 선언되는 시점에서 초기화가 함께 진행되며, 해당 변수가 선언되기 전에도 사용할 수 있기 때문에 var 변수는 선언되기 전에 사용하더라도 'undefined'로 초기화 됩니다. 

그러나 'let'과 'const'는 변수가 선언되는 시점에서 초기화 되지 않고, 변수의 스코프 내에서 실제 할당문이 실행될 때 초기화 됩니다. 이로인해 변수 선언과 초기화 사이에서 일시적 사각지대(TDZ)가 형성됩니다. 

---

🙋🏻‍♀️ 호이스팅은 자바스크립트만의 특징인가요?

📝 네, 맞습니다. 호이스팅은 자바스크립트의 독특한 특징이며, 실제 코드가 끌어 올려지는 것은 아니고, 자바스크립트 parser가 내부적으로 끌어올려서 처리하는 것입니다. 

---

🙋🏻‍♀️ 끌어 올려지는 것처럼 동작한다고 말씀해 주셨는데, 컴파일 단계에서 실제로 코드가 끌어올려지지는 않나요?

📝 호이스팅은 개념적인 설명을 위해 사용되는 용어라서, 코드가 실제로 물리적으로 끌어올려지지는 않습니다. 그저 자바스크립트 엔진이 코드를 해석하고, 실행하기 전에 내부적으로 처리하는 단계를 나타내는 개념입니다.