호이스팅이란?

조민호·2023년 1월 28일

JavaScript에서 호이스팅(hoisting)이란,

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.

JS에서 모든선언문은 런타임 이전 단계에서 먼저 실행되는 것입니다

호이스팅을 설명할 땐 주로 "변수의 `선언과 초기화를 분리`한 후,

선언만 코드의 최상단으로 옮기는" 것으로 말하곤 합니다.

따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있습니다.

💡 var만 호이스팅을 하는 것이 아니라 let , const를 비롯한 함수들도 전부 다 호이스팅을 대상입니다
다만 , 변수 `초기화` 를 하냐 or 안 하냐의 차이입니다

함수 또한 마찬가지로 호이스팅이 됩니다

그리고 함수는 var와 마찬가지로 상단에서 호출이 가능합니다

이 특징 덕분에 함수를 호출하는 코드를 함수 선언보다 앞서 배치할 수 있습니다.

catName("클로이");

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

/*
결과: "제 고양이의 이름은 클로이입니다"
*/

변수를 먼저 사용하고 그 후에 선언 및 초기화가 나타나면,

아래의 예시와 같이 사용을 먼저 하고 , 그 후에 선언 및 초기화가 나타나면, 사용하는 시점의 변수는 기본 초기화 상태 입니다
(var >> undefined , let , const >> 초기화 안함 )

console.log(num); // 초기화가 6으로 돼도 JS는 선언만 호이스팅 하므로
									// var의 기본 초기화 상태인 undefined출력
var num; // 선언
num = 6; // 초기화

console.log(num); // 초기화가 6으로 돼도 JS는 선언만 호이스팅 하고
									// let의 기본 초기화 상태는 없으므로 error 발생
let num; // 선언
num = 6; // 초기화

아래의 코드는 선언 없이(var나 let.,const가 없음) 초기화만 존재합니다.

따라서 호이스팅도 없으므로 , 변수를 읽으려는 시도에서는

ReferenceError가 발생합니다

x = 1; 
console.log(x); // 1

console.log(x); // 호이스팅 자체가 없으므로 ReferenceError
x = 1;


x = 1; 
console.log(x + " " + y); // '1 undefined'
var y = 2;

x 를 1로 초기화 합니다
기본적으로 초기화가 되는 것이지만 만약 x를 선언해놓지 않은 경우 선언문+초기화가 됩니다.
y를 선언하고 동시에 2로 초기화 합니다

그렇지만 JS는 선언만 호이스팅하므로, 윗줄의 y는 undefined가 뜹니다. y만 호이스팅이 되는 것입니다

a = '크랜'; // a 초기화
b = '베리'; // b 초기화

console.log(a + "" + b); // '크랜베리'

호이스팅은 없지만, 선언 + 초기화가 동시에 되므로 변수를 사용할 수 있습니다