JavaScript : Hoisting(호이스팅) 최상단으로 끌어올려지는 현상 알아보자

 

 

---

1. Hoisting(호이스팅)이란?

JavaScript에서는 변수 선언(var, let, const)과 함수 선언이 해당 스코프(전역 또는 함수 스코프) 최상단으로 끌어올려지는(hoisted) 현상이 발생합니다.
즉, 코드가 실행되기 전에 변수와 함수 선언이 메모리에 등록되기 때문에, 선언된 위치와 상관없이 접근이 가능하게 됩니다.

중요: 호이스팅은 **선언(declaration)**만 이동시키며, **초기화(initialization)**는 이동시키지 않습니다.

---

2. 변수 호이스팅

2.1. var 키워드의 호이스팅

var로 선언된 변수는 호이스팅 시 선언만 끌어올려지고, 초기화는 실제 코드 실행 시점에 이루어집니다.
아래 예제를 살펴봅시다.

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

설명:

• 첫 번째 console.log(x)는 변수 x가 선언은 되었지만 초기화되지 않았으므로 undefined를 출력합니다.
• 내부적으로는 다음과 같이 동작합니다:

var x;            // 선언만 호이스팅됨
console.log(x);   // 아직 값이 할당되지 않았으므로 undefined 출력
x = 10;           // 초기화
console.log(x);   // 10 출력

2.2. let과 const의 호이스팅

let과 const도 호이스팅되지만, **"Temporal Dead Zone(TDZ)"**라는 개념 때문에 선언 전에 접근하면 에러가 발생합니다.

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 20;

설명:

• let과 const는 선언은 호이스팅되지만, 실제 초기화가 이루어지기 전까지는 접근할 수 없으므로 ReferenceError가 발생합니다.
• 이는 "Temporal Dead Zone" 이라고 하며, 변수 선언과 초기화 사이의 영역입니다.

---

3. 함수 호이스팅

함수 선언문은 변수와 달리 전체 함수의 정의가 호이스팅되기 때문에, 선언 이전에도 함수를 호출할 수 있습니다.

3.1. 함수 선언문(Function Declaration)

console.log(sum(3, 4)); // 7

function sum(a, b) {
  return a + b;
}

설명:

• sum 함수의 선언문 전체가 호이스팅되므로, 선언 전에 호출해도 정상적으로 작동합니다.

3.2. 함수 표현식(Function Expression)

반면, 함수 표현식은 변수에 할당되는 형태이므로, 변수 호이스팅 규칙을 따릅니다.

console.log(multiply); // undefined
// console.log(multiply(3, 4)); // TypeError: multiply is not a function

var multiply = function(a, b) {
  return a * b;
};

console.log(multiply(3, 4)); // 12

설명:

• multiply는 변수로 선언되었기 때문에, 초기화 이전에 호출하면 에러가 발생합니다.
• 내부적으로 var multiply;가 호이스팅되지만, 함수 할당은 코드 실행 시점에 이루어집니다.

---

4. 호이스팅 관련 모범 사례

1. 변수 선언을 항상 코드 상단에 작성
   혼동을 줄이고 코드의 가독성을 높이기 위해 변수와 함수를 사용하기 전에 선언하는 습관을 들이는 것이 좋습니다.
2. let과 const 사용 권장
   var보다 블록 스코프를 가지며, TDZ를 통해 잠재적인 버그를 예방할 수 있는 let과 const 사용을 권장합니다.
3. 함수 선언과 표현식 구분
   함수 선언문과 함수 표현식의 차이를 명확히 이해하고 적절한 경우에 활용합니다.

---

5. 정리

• Hoisting(호이스팅): 변수 및 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 현상
• var: 선언은 호이스팅되지만, 초기화는 원래 위치에서 이루어짐 → 초기화 전에 접근 시 undefined
• let/const: 호이스팅되지만 Temporal Dead Zone으로 인해 초기화 전 접근 시 에러 발생
• 함수 선언문: 전체 함수 정의가 호이스팅되어 선언 이전에도 호출 가능
• 함수 표현식: 변수 호이스팅 규칙을 따르므로, 초기화 전 호출 시 에러 발생

 

 

 

호이스팅 개념을 잘 이해하면 JavaScript 코드의 실행 순서와 스코프에 대한 이해도가 높아져, 디버깅과 코드 최적화에 큰 도움이 됩니다.
더 나은 코드를 위해 항상 변수와 함수의 선언 위치에 주의를 기울이시길 바랍니다.