JavaScript 호이스팅(Hoisting)

Javascript 호이스팅(Hoisting)

JavaScript에서 호이스팅(Hoisting)은 변수 선언과 함수 선언이 코드 실행 전에 자바스크립트 엔진에 의해 최상위로 끌어올려지는 동작을 말하며, 이로 인해 코드 작성 순서와 관계없이 변수나 함수를 사용할 수 있는 것처럼 보이나, 호이스팅의 실제 동작 방식을 이해하는 것이 중요하다

변수 호이스팅

자바스크립트에서는 var 키워드로 선언된 변수들이 호이스팅 된다. 하지만 호이스팅 시 변수 선언만 끌어올려지고, 변수 할당은 원래 코드에서 선언된 위치에 남아 있게 된다.
이는 초기화 전에 변수를 참조할 수 있지만, 이 경우 값은 undefined가 된다.

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

위 예제에서 var a = 10; 부분은 두 단계로 나뉜다.

변수 선언(var a;)과 할당(a = 10;). 자바스크립트는 변수를 선언하는 부분을 코드의 최상단으로 끌어올린다. 그래서 console.log(a);가 실행될 때 a는 이미 선언되어 있지만, 아직 값이 할당되지 않았으므로 undefined가 출력된다.

함수 호이스팅

함수 선언도 호이스팅된다. 하지만 함수 표현식과는 다르게 함수 선언은 완전히 호이스팅되기 때문에, 선언된 함수는 코드 어디서든 호출할 수 있다.

console.log(sum(2, 3)); // 5

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

이 코드에서는 sum 함수가 정의되기 전에 호출되고 있지만, 함수 선언이 호이스팅되어 정상적으로 작동한다.

반면, 함수 표현식의 경우 함수가 변수에 할당되는 시점까지 호이스팅되지 않기 때문에, 해당 변수를 호출하려고 하면 에러가 발생한다.

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

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

여기서 multiply는 undefined로 초기화되기 때문에, 함수처럼 호출하려고 하면 오류가 발생한다.

let과 const의 호이스팅

ES6에서 도입된 let과 const로 선언된 변수도 호이스팅되지만, var와 다르게 초기화되지 않은 상태로 유지되며, 일시적 사각지대(TDZ, Temporal Dead Zone)에 갇히게 된다. 그러기에 선언 전에 접근하려고 하면 ReferenceError가 발생한다.

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

이처럼 let과 const는 선언되기 전까지 접근할 수 없도록 보호된다.

결론

호이스팅은 자바스크립트의 중요한 개념 중 하나로, 변수와 함수 선언이 코드 실행 전에 끌어올려지는 과정을 이해하는 것이 중요하다. 특히, var, let, const의 호이스팅 동작이 각각 다르므로, 올바른 변수를 사용하여 의도하지 않은 버그를 피해야 한다.