JavaScript - 호이스팅(Hoisting)

이전 변수 선언에 대한 글에서 잠깐 호이스팅에 대한 내용이 나왔는데, 

이번 글에서 좀 자세하고 알기 쉽게 정리해보려고 한다.

 

호이스팅은 이해가 없으면 JavaScript 코드를 작성할 때 혼란을 야기하니 꼭 이해하고 넘어가자!

 

---

1. 호이스팅이란?

 

호이스팅(Hoisting)은 JavaScript에서 변수와 함수 선언이 실행되기 전에 스코프의 최상단으로 끌어올려지는 동작을 말한다.

즉, 코드가 실행되기 전에 JavaScript 엔진이 변수와 함수의 선언을 미리 처리한다.

 

- 호이스팅의 기본 동작

console.log(message); // undefined
var message = "Hello, Hoisting!";
console.log(message); // "Hello, Hoisting!"

위 코드는 아래와 같이 해석된다.

var message;
console.log(message); // undefined
message = "Hello, Hoisting!";
console.log(message); // "Hello, Hoisting!"

- 변수 선언(var)은 호이스팅되지만, 초기화는 호이스팅되지 않는다.

- 초기화는 코드가 실제 실행될 때 이루어진다.

 

---

2. 호이스팅의 발생

 

호이스팅은 변수와 함수 선언에서 발생하지만, 선언 방식에 따라 호이스팅 동작이 다르게 나타난다.

 

2-1. 변수의 호이스팅

var : 변수 선언만 호이스팅되고, 초기화는 호이스팅되지 않는다.

console.log(a); // undefined
var a = 10;
console.log(a); // 10

 

let, const : TDZ(Temporal Dead Zone)에 의해 초기화 전에 접근하면 오류가 발생한다.

console.log(b); // ReferenceError: b is not defined
let b = 20;

console.log(c); // ReferenceError: c is not defined
const c = 30;

 

TDZ(Temporal Dead Zone)

- 변수가 선언되었지만 초기화되기 전까지의 범위를 말한다.

- let과 const는 TDZ 동안 변수에 접근할 수 없다.

 

 

 

2-2. 함수의 호이스팅

함수 선언문 : 함수는 선언과 초기화가 함께 호이스팅된다.

sayHello(); // "Hello, Hoisting!"

function sayHello() {
    console.log("Hello, Hoisting!");
}

 

 

함수 표현식

- 함수 표현식은 변수에 할당된 값으로 취급

- 변수는 호이스팅되지만, 초기화는 호이스팅되지 않는다.

sayHello(); // TypeError: sayHello is not a function

var sayHello = function() {
    console.log("Hello, Function Expression!");
};

 

 

 

2-3. var과 함수 선언

console.log(a); // undefined
console.log(myFunction()); // "I am hoisted!"

var a = 10;

function myFunction() {
    return "I am hoisted!";
}

- 변수 선언과 함수 선언은 모두 호이스팅된다.

- 함수 선언이 변수보다 우선적으로 호이스팅된다.

---

3. 호이스팅 정리

선언 방식	호이스팅 여부	초기화 시점	TDZ 적용
var	선언만 호이스팅	코드 실행 시 초기화	X
let	선언만 호이스팅	코드 실행 시 초기화	O
const	선언만 호이스팅	코드 실행 시 초기화	O
함수 선언문	선언과 초기화 호이스팅	실행 전 사용 가능	X
함수 표현식	선언만 호이스팅	코드 실행 시 초기화	X

 

---

호이스팅은 JavaScript가 변수와 함수 선언을 스코프의 최상단으로 끌어올리는 동작이다.

이를 이해하여 코드 작성 시 의도치 않은 문제를 발생시키지 않게 개발했으면 좋겠다.

 

 

끝.