호이스팅에 대해서 알아보도록 하겠습니다.
호이스팅은 자바스크립트에서 변수, 함수, 클래스의 선언이 코드의 실행 전의 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 현상을 말합니다. 이로 인해 코드에서 선언 위치에 상관없이 변수를 참조하거나 함수를 호출할 수 있는 것처럼 보일 수 있습니다.
1. 호이스팅의 핵심원리
자바스크립트는 코드 실행 전에 변수와 함수의 선언을 스코프의 맨 위로 끌어올립니다.
단, 실제 값의 할당은 원래 코드에 작성된 위치에서 수행되므로 선언만 먼저 이루어진 상태가 됩니다.
2. 변수의 호이스팅
(1) var의 경우
- var는 선언이 호이스팅되고, 초기화되지 않은 상태에서는 undefined로 초기화됩니다.
console.log(a); // undefined
var a = 10;
console.log(a); // 10위의 예제는 다음과 같이 해석됩니다.
var a; // 선언이 호이스팅됨
console.log(a); // undefined (초기화는 아직 이루어지지 않음)
a = 10; // 값이 할당됨
console.log(a); // 10
(2) let과 const의 경우
- let과 const는 선언이 호이스팅되지만, 초기화되기 전까지는 TDZ상태에 머물며 접근이 불가능합니다.
- TDZ는 변수 선언이 스코프의 시작부터 초기화가 이루어지는 시점까지의 구간을 말합니다.
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;
3. 함수의 호이스팅
(1) 함수 선언문
- 함수 선언문은 선언과 정의가 모두 호이스팅되므로 선언 위치에 관계없이 함수 호출이 가능합니다.
sayHello(); // "Hello!"
function sayHello() {
console.log("Hello!");
}
(2)함수 표현식
- 함수 표현식은 변수 호이스팅의 규칙을 따릅니다.
즉, 변수의 선언만 호이스팅되며 초기화된 함수는 실제 작성된 위치에서 할당됩니다.
greet(); // TypeError: greet is not a function
var greet = function () {
console.log("Hi!");
};
4. 클래스의 호이스팅
클래스 선언도 호이스팅되지만, 초기화되기 전에는 TDZ에 머무리므로 접근이 불가능합니다.
const obj = new MyClass(); // ReferenceError: Cannot access 'MyClass' before initialization
class MyClass {
constructor() {
this.name = "Class";
}
}