[ JS ] 호이스팅이란 ?

호이스팅

호이스팅은 프론트 엔드 웹 개발에 널리 사용되는 프로그래밍 언어인 Javascript의 개념으로, 코드가 실행되기 전 컴파일 단계에서 변수 및 함수 선언을 포함 범위의 맨 위로 이동하는 동작을 나타냅니다.

이를 올바르게 이해하지 못하면 때로 예상하지 못한 동작이 발생할 수 있습니다.

 

호이스팅 핵심 내용

1. 변수 선언: 키워드를 사용하여 변수를 선언하면 var선언은 전역 범위의 맨 위로 끌어올려집니다. 그러나 변수의 초기화는 원래 위치에 유지됩니다.

console.log(x); // undefined

var x = 5;

위에서는 변수 x가 호이스팅 되었으므로 console.log(x)에 오류가 발생하지 않지만 'undefined'가 할당됩니다. ( var x = 5; 호이스팅이 되지 않았기 때문에 )

 

2. 함수 선언: 함수 선언도 호이스팅이 되며 본문을 포함한 전체 함수가 포함 범위의 맨 위로 이동됩니다.

즉, 코드에서 함수가 선언되기 전에 함수를 호출할 수 있습니다.

hello(); // "Hello, World!"

function hello() {
    console.log("Hello, World!");
}

 

3. let과 const를 포함한 가변 호이스팅: var와 다르게 let과 const로 선언된 변수는 호이스트로 표시되지만 정의되지 않은 변수로 초기화되지는 않습니다. 대신 코드에 실제로 선언되기 전까지는 TDZ( Temporary Dead Zone )에 있습니다. 이는 선언 전에 변수 값에 접근할 수  없음을 의미합니다.

console.log(x); // ReferenceError: ...

let x = 5;

 

4. 함수식: 함수를 변수에 할당하는 함수식은 함수 선언과 같은 방식으로 호스팅되지 않으며, 함수 할당이 아닌 변수 선언만 호스팅됩니다.

hello(); // TypeError: ...

var hello = function() {
    console.log("Hello, World!");
}

 

요약을 하자면, Javascript에서 호이스팅은 컴파일 단계에서 변수와 함수의 선언을 포함 범위의 가장 위로 이동시키는 동작입니다.

프론트 엔드 웹 개발에서 호이스팅이 예기치 않은 동작을 방지하고 보다 예측 가능하고 유지 가능한 코드를 작성하는 방버을 이해하는 것이 매우 중요합니다.