[JavaScript] 호이스팅 (Hoisting)

호이스팅이란?

호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻합니다. - MDN Web Docs

 

 

• 사전적으로 "끌어올리다" 를 의미
• 스크립트 내 선언된 함수 및 변수들이 순서에 상관없이 최상단으로 끌어올려짐
• 자바스크립트 엔진이 컴파일 과정에서 먼저 미리 스캔하고 실행 컨텍스트에 변수/함수객체를 미리 저장하기에 이런 현상이 발생

 

변수 호이스팅

변수가 호이스팅 될 때는 선언, 초기화만 된채로 호이스팅 되고 할당까지 호이스팅 되지 않음

var 로 선언된 변수의 호이스팅

• 아래 예제에서 console.log() 는 초기화 된 var 변수를 출력하므로 undefined를 출력

  console.log(hoistVar)
  var hoistVar = "테스트" //undefined

 

let / const 로 선언된 변수의 호이스팅

• let / const 또한 호이스팅되어 변수를 메모리에 올려놨지만 TDZ 로 인하여 접근이 불가하여 "ReferenceError" 발생
• TDZ 가 궁금하다면? : https://developerkgh.tistory.com/28

console.log(hoistConst) // ReferenceError
let hoistLet = "테스트"
   
console.log(hoistConst) // ReferenceError
const hoistConst = "테스트"

 

함수 호이스팅

• 함수는 최상단으로 호이스팅되어 실행 됨

hoistFunc(); // Hoisting 출력

function hoistFunc() {
	console.log('Hoisting')
}