[개발지식] JavaScript 호이스팅 정리

호이스팅(Hoisting)이란?

호이스팅(Hoisting)은 JavaScript에서 변수 선언과 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 현상을 말합니다.
이 현상으로 인해 개발자가 변수나 함수를 코드의 어느 위치에 선언하든, 실행하기 전에 선언부가 먼저 실행되어 마치 코드 맨 위에 선언된 것처럼 동작하게 됩니다

변수 호이스팅

var 호이스팅

var로 선언한 변수는 선언과 초기화는 호이스팅 되지만, 값 할당은 호이스팅 되지 않기 때문에, 값 할당이 이뤄지기 전까지는 undefined가 나오게 됩니다.

console.log(x); // undefined (ReferenceError가 아님)
var x = 10;
console.log(x); // 10

let, const 호이스팅

let과 const는 선언 자체는 호이스팅되지만 초기화가 호이스팅되지 않으며 TDZ(Temporal Dead Zone)라는 개념 때문에 다르게 동작합니다.

console.log(y); // ReferenceError
let y = 20;

console.log(z); // ReferenceError
const z = 30;

TDZ(Temporal Dead Zone)란?

변수가 선언된 시점부터 초기화되기 전까지의 구간에서의 접근을 막는 역할을 말합니다.
let과 const로 선언된 변수에는 TDZ가 존재하는데, 해당 구간에서 변수에 접근하면 ReferenceError가 발생하게 됩니다.

함수 호이스팅

함수 선언문은 함수 자체가 호이스팅되기 때문에, 함수 호출을 선언 이전에 해도 문제가 되지 않지만 함수 표현식은 위에서 설명한 변수 호이스팅 규칙을 따릅니다.

// 함수 선언문
sayHello(); // "안녕하세요!"

function sayHello() {
    console.log("안녕하세요!");
}

// 함수 표현식은
console.log(myFunc); // undefined
myFunc(); // TypeError: myFunc is not a function

var myFunc = function() {
    console.log("함수 표현식");
};

정리

호이스팅을 제대로 이해한다면 JavaScript의 동작을 더 정확히 예측할 수 있고, 예상치 못한 버그를 방지할 수 있을거 같습니다.
var: 호이스팅되어 undefined로 초기화
let, const: 호이스팅되지만 TDZ로 인해 초기화 전 접근 불가
함수 선언문: 완전히 호이스팅되어 선언 전 호출 가능
함수 표현식: 변수 호이스팅 규칙을 따름