호이스팅(Hoisting)은 코드 실행이 시작되기 전에 자바스크립트 엔진이 함수 선언과 var 키워드로 선언된 변수들을 해당 스코프의 최상단으로 끌어올리는 것처럼 처리하는 메커니즘입니다. 이러한 특성 덕분에 우리는 함수나 변수가 실제 코드에서 정의되기 전에 호출할 수 있습니다.
다만 몇 가지 주의할 점이 있습니다. var 변수는 선언부만 끌어올려질 뿐 값의 초기화는 이루어지지 않으므로, 정의 이전에 접근하면 undefined가 반환됩니다. 반면 let과 const 역시 호이스팅 대상이지만, 초기화되기 전까지는 일시적 사각지대(TDZ, Temporal Dead Zone)에 머물러 있어 접근 시 ReferenceError 오류가 발생합니다.
다음 예제 코드는 자바스크립트에서 변수와 함수의 호이스팅이 실제로 어떻게 동작하는지 보여줍니다.
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result,.sample {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>자바스크립트 호이스팅</h1>
<div class="sample">
정의되기 전에 함수와 변수 호출하기
</div>
<div style="color: green;" class="result"></div>
<button class="btn">클릭하세요</button>
<h3>
위 버튼을 클릭하면 호이스팅이 작동하는 모습을 확인할 수 있습니다
</h3>
<script>
let btnEle = document.querySelector(".btn");
let resEle = document.querySelector(".result");
btnEle.addEventListener("click", () => {
resEle.innerHTML = "retString() : " + retString() + "<br>";
resEle.innerHTML += "var a = " + a + "<br>";
try {
resEle.innerHTML += "let b = " + b + "<br>";
}
catch (err) {
resEle.innerHTML += err;
}
let b = 55;
var a = 22;
function retString() {
return "Hello world";
}
});
</script>
</body>
</html>
출력 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
'클릭하세요' 버튼을 클릭하면 아래와 같은 결과를 확인할 수 있습니다.
버튼을 클릭하면 세 가지 결과가 순서대로 표시됩니다. 첫째, 함수 선언문은 통째로 호이스팅되므로 정의보다 앞에서 호출한 retString()이 정상적으로 'Hello world'를 반환합니다. 둘째, var a는 호이스팅되어 undefined로 초기화된 상태이므로 22가 아닌 undefined가 출력됩니다. 셋째, let b는 아직 TDZ에 있는 상태에서 접근했기 때문에 ReferenceError가 발생하며, 이를 try-catch 문으로 잡아 화면에 출력하게 됩니다.