변수 호이스팅이란 무엇인가?
자바스크립트에서 호이스팅(Hoisting)은 변수가 코드에서 실제로 선언되기 전에 사용할 수 있는 것처럼 동작하는 특성을 말합니다. 이것이 가능한 이유는 자바스크립트 파서(parser)가 코드를 실행하기 전에 함수 전체를 먼저 훑어보면서 변수 선언을 미리 처리하기 때문입니다.
즉, 변수가 선언된 위치와 상관없이 선언 부분이 해당 스코프의 최상단으로 끌어올려진(hoisted) 것처럼 작동하는 것이 바로 호이스팅입니다.
호이스팅 예제
다음과 같이 변수를 선언하기 전에 값을 할당하면,
points = 200;
var points;
위 코드는 아래 코드와 정확히 같은 방식으로 동작합니다.
var points;
points = 200;
var, let, const의 호이스팅 차이
호이스팅은 모든 변수에 동일하게 적용되지 않습니다. 각 키워드별 차이를 이해하는 것이 중요합니다.
- var: 선언과 초기화(undefined 할당)가 함께 호이스팅되므로, 선언 전에 접근해도 에러 없이
undefined가 반환됩니다. - let / const: 선언은 호이스팅되지만 초기화는 되지 않습니다. 따라서 선언문 이전에 접근하면
ReferenceError가 발생하며, 이 구간을 일시적 사각지대(Temporal Dead Zone, TDZ)라고 부릅니다.
console.log(a); // undefined
var a = 10;
console.log(b); // ReferenceError 발생
let b = 20;
정리
호이스팅은 자바스크립트 엔진이 실행 전에 변수와 함수 선언을 메모리에 미리 등록하는 과정에서 생기는 현상입니다. 다만 코드의 가독성과 안정성을 위해 변수는 항상 사용하기 전에 선언하고, 가능하면 let과 const를 사용하는 것이 좋은 개발 습관입니다.