[JavaScript] 호이스팅(Hoisting)

호이스팅

JavaScript에서 호이스팅이란, 인터프리터가 변수와 함수의 메모리 공간을 선언하기 전에 미리 할당하는 것을 의미한다.
함수가 실행되기 전, 함수 내에서 필요하는 변수 값들을 해당 함수의 유효 범위 최상단에 선언해 준다.

보통, 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것이라고 말한다. 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있다.
선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 된다는 점을 주의해야 한다.

함수 선언에 대한 메모리 할당

• 선언된 함수는 선언문 상단에서 참조, 호출 가능
• 함수를 호출하는 코드를 함수 선언보다 앞서 배치 가능
• 다른 자료형과 변수에도 잘 동작함
• 변수를 선언하기 전, 먼저 초기화하고 사용 가능

function myName(name) {
	console.log(`제 이름은 ${name}입니다.`); //제 이름은 김철수입니다.
}

myName("김철수");

myName("김철수");

function myName(name) {
	console.log(`제 이름은 ${name}입니다.`); //제 이름은 김철수입니다.
}

변수 선언만 호이스팅 대상

• 초기화를 제외한 선언만 호이스팅
  • 변수의 상태 세 단계
    1. 선언: 변수 객체가 변수에 대한 식별자들을 수집
    2. 초기화: 선언한 구문에서 일어나며, 변수에 값을 할당하고 접근 가능하게 함
    3. 할당: 변수 안에 값을 저장
• 변수를 먼저 사용 후, 선언 및 초기화가 나타나면 사용하는 시점의 변수가 기본 초기화 상태
  • var 선언 시, undefined이고 그 외에는 초기화되지 않음
    • var로 선언 된 변수는 선언문 상단에서 참조, 할당 가능 
    • var로 선언한 변수의 경우, 호이스팅을 하면 undefined로 변수를 초기화

/** 1 **/
console.log(num); // undefined
var num; //선언
num = 6; //초기화


/** 2 **/
console.log(num) // ReferenceError
num = 6; //초기화

/** 1) y만 호이스팅 대상이 되는 경우 **/
x = 1; // 초기화만 일어났으므로 호이스팅이 되지 않음
console.log(x, y); // 1 undefined
// JS는 선언만 호이스팅하므로, 윗줄의 y는 undefined
var y = 6; // y 선언 후 초기화


/** 2) 호이스팅은 없지만 변수 초기화는 변수 선언까지 병행하므로 변수 사용 가능**/
x = 1;
y = 6;
console.log(x, y); // 1 6

let과 const 호이스팅

• let과 const로 선언한 변수는 사단에서 참조, 할당 불가능
• let과 const로 선언한 변수의 경우에는 호이스팅 시, 변수를 초기화하지 않음
  • const의 경우, 선언만 하는 것이 불가능
• 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나타나면 예외 발생
• 선언 이전에 사용하려 하면 에러 발생

x = 1;
console.log(x, y); // 에러 발생
let y = 6;

참고: https://developer.mozilla.org/ko/docs/Glossary/Hoisting