호이스팅(Hoisting)

호이스팅(Hoisting)이란?

변수 선언과 함수 선언이 코드의 실행 전에 해당 범위의 최상단으로 끌어올려지는 자바스크립트의 동작 방식을 의미합니다.

즉, 자바스크립트는 코드가 실행되기 전에 변수와 함수의 선언을 먼저 처리하지만, 변수의 값 할당은 그 위치에서 이루어집니다.

 

1. 변수 호이스팅

변수는 var, let, const 키워드를 사용하여 선언되며, 선언 방식에 따라 호이스팅의 동작 방식이 다릅니다.

 

1-1. var 키워드의 호이스팅

var로 선언된 변수는 선언만 끌어올려지고, 초기화(값 할당)는 실제 코드의 위치에서 이루어집니다. 즉, 선언된 변수는 호이스팅 되어 사용 가능하지만, 값은 할당된 위치 이후부터 접근할 수 있습니다.

 

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

 

위 코드에서 var a 선언은 호이스팅되지만, 변수 a의 값은 undefined로 출력됩니다. 이는 선언만 최상단으로 끌어올려지고 값 할당은 그 이후에 일어나기 때문입니다.

 

1-2. let과 const의 호이스팅

let과 const는 호이스팅되지만, 일시적 사각지대(Temporal Dead Zone, TDZ)때문에 변수에 접근하기 전에 선언된 위치에 도달해야 합니다. 즉, 선언 전에 해당 변수를 접근하면 에러가 발생합니다.

 

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

 

이처럼 let과 const는 호이스팅되지만, 초기화 전에 접근하려고 하면 ReferenceError가 발생합니다.

 

2. 함수 호이스팅

함수 선언 방식도 호이스팅에서 중요한 역할을 합니다. 함수 선언은 전체 코드에서 최상단으로 끌어올려지므로 함수 호출이 선언 전에 이루어질 수 있습니다.

 

2-1. 함수 선언

함수 선언(function)으로 정의된 함수는 선언과 동시에 코드 상의 위치에 관계없이 언제든지 호출이 가능합니다.

 

hoistedFunction(); // "Hello, world!"

function hoistedFunction() {
    console.log("Hello, world!");
}

 

위 코드에서 함수 선언은 함수 호출 전에 선언되었음에도 불구하고 정상적으로 실행됩니다.

 

2-2. 함수 표현식

함수 표현식(var, let, const로 변수를 사용하여 함수 할당)은 변수가 초기화되기 전까지는 사용할 수 없습니다.

 

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

var notHoistedFunction = function() {
    console.log("This is not hoisted.");
};

 

위 예제에서는 함수 표현식이기 때문에 변수의 할당이 이루어지기 전에는 undefined로 취급됩니다.

 

3. 요약

- var: 변수 선언은 호이스팅되지만, 초기화는 선언 위치에서 이루어집니다. 초기화 전에는 undefined 값을 가집니다.

- let / const : 변수 선언이 호이스팅 되지만, 일시적 사각지대(TDZ) 때문에 선언 전에 접근하면 ReferenceError가 발생합니다.

- 함수 선언(function): 선언된 함수는 코드 상 어디서든 호출이 가능합니다.

- 함수 표현식: 함수가 선언된 이후부터 호출할 수 있으며, 변수의 할당이 이루어지기 전에는 undefined입니다.