JS : 호이스팅(Hoisting)

자바스크립트 호이스팅 (JavaScript Hoisting) hoisting

개요 📜

호이스팅(Hoisting)은 자바스크립트 엔진이 코드를 실행하기 전에 변수와 함수 선언을 해당 스코프의 최상단으로 끌어올리는 것처럼 동작하는 방식을 의미합니다. 이로 인해 선언하기 전에 변수나 함수를 참조해도 에러가 발생하지 않을 수 있습니다.

⚠️ **주의:** 실제로 코드가 물리적으로 이동하는 것은 아닙니다. 자바스크립트 엔진이 코드를 파싱할 때 선언부를 먼저 메모리에 저장하기 때문에 이런 현상이 발생합니다.

---

var 변수 호이스팅

var로 선언된 변수는 호이스팅될 때 undefined로 초기화됩니다. 따라서 선언 전에 변수에 접근하면 에러가 발생하는 대신 undefined를 반환합니다.

console.log(myVar); // undefined

var myVar = "Hello, world!";
console.log(myVar); // "Hello, world!"

위 코드는 자바스크립트 엔진에 의해 아래와 같이 해석됩니다.

var myVar; // 선언이 위로 끌어올려지고 undefined로 초기화됩니다.
console.log(myVar); // undefined
myVar = "Hello, world!"; // 할당은 원래 위치에서 이루어집니다.
console.log(myVar); // "Hello, world!"

---

let과 const 호이스팅 (TDZ)

let과 const로 선언된 변수도 호이스팅되지만, var와는 다르게 초기화되지 않습니다. 이로 인해 변수 선언 전에 접근하려고 하면 일시적 사각지대(Temporal Dead Zone, TDZ)에 빠져 ReferenceError가 발생합니다.

console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization

let myLet = "Hello";

TDZ는 스코프의 시작 지점부터 변수 선언문까지의 구간을 말합니다. 이 구간에서는 해당 변수를 사용할 수 없습니다.

---

함수 호이스팅

함수 선언문은 전체가 호이스팅됩니다. 즉, 함수 선언 자체가 메모리에 저장되므로 선언 전에 함수를 호출할 수 있습니다.

함수 선언문 (Function Declaration)

sayHello(); // "Hello!"

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

함수 표현식 (Function Expression)

반면, 함수 표현식은 변수 호이스팅 규칙을 따릅니다. var로 할당하면 변수는 undefined로 호이스팅되고, let이나 const로 할당하면 TDZ의 영향을 받습니다.

// var를 사용한 함수 표현식

console.log(sayHi); // undefined
// sayHi(); // TypeError: sayHi is not a function
var sayHi = function() {
console.log("Hi!");
};
// let을 사용한 함수 표현식
// console.log(sayBye); // ReferenceError
let sayBye = function() {
console.log("Bye!");
};

---

호이스팅 우선순위

같은 이름의 변수와 함수가 선언되었을 때, 함수 선언이 변수 선언보다 높은 우선순위를 가집니다.

console.log(typeof myFunc); // function

var myFunc = "variable";
function myFunc() {
console.log("I am a function");
}
console.log(typeof myFunc); // string

위 코드는 다음과 같이 동작합니다.

1. function myFunc()가 먼저 호이스팅되어 myFunc는 함수가 됩니다.
2. 그 다음 var myFunc가 처리되지만, 이미 같은 이름의 함수가 있으므로 무시됩니다.
3. 첫 번째 console.log는 'function'을 출력합니다.
4. 코드가 실행되면서 myFunc = "variable" 할당문이 실행됩니다.
5. 두 번째 console.log는 'string'을 출력합니다.

---

결론 및 권장사항 ✨

• var의 사용을 지양하고, 블록 스코프와 TDZ를 제공하는 let과 const를 사용하면 호이스팅으로 인한 혼란을 줄일 수 있습니다.
• 변수와 함수는 사용하기 전에 항상 스코프의 최상단에 선언하는 것이 코드의 가독성과 예측 가능성을 높이는 좋은 습관입니다.