[JavaScript] - 호이스팅

호이스팅

호이스팅(Hoisting)은 JavaScript에서 변수와 함수 선언문이 코드 실행 전에 해당 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 현상을 의미

 

var 키워드

• 선언 단계가 호이스팅되어 스코프의 최상단으로 이동
• 초기화는 호이스팅되지 않음, 선언 전에 해당 변수에 접근하면 undefined 값을 반환

console.log(a); // 출력: undefined
var a = 5;
console.log(a); // 출력: 5

→ 코드 내부적 해석

var a;
console.log(a); // 출력: undefined
a = 5;
console.log(a); // 출력: 5

 

let 및 const 키워드

• 호이스팅되지만, 초기화 전에 해당 변수에 접근하면 ReferenceError가 발생
• 이는 “Temporal Dead Zone”(TDZ) 때문

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

 

 

함수 호이스팅

함수 선언문

• 선언과 정의 모두 호이스팅되므로, 함수를 선언 전에 호출 가능

greet(); // 출력: 안녕하세요!

function greet() {
  console.log('안녕하세요!');
}

 

함수 표현식

• 변수의 초기화가 호이스팅되지 않으므로, 선언 전에 호출하면 TypeError가 발생

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

var greet = function() {
  console.log('안녕하세요!');
};

→ 코드 내부적 해석

var greet;
greet(); // TypeError: greet is not a function
greet = function() {
  console.log('안녕하세요!');
};

 

클래스 호이스팅

• 호이스팅되지만, 초기화 전에 접근하면 ReferenceError가 발생

const obj = new MyClass(); // ReferenceError: Cannot access 'MyClass' before initialization

class MyClass {
  constructor() {
    console.log('클래스 생성자 호출');
  }
}