호이스팅

호이스팅 (Hoisting)

소개

호이스팅(Hoisting)은 JavaScript의 기본 동작 중 하나로, 변수 선언과 함수 선언이 해당 범위의 상단으로 끌어올려진 것처럼 동작하는 것을 말합니다. 이로 인해 변수와 함수를 선언하기 전에 참조할 수 있는 것처럼 보입니다. 하지만 실제로는 변수의 초기화는 호이스팅되지 않으며, 선언만 호이스팅됩니다.

변수 호이스팅

var

var로 선언된 변수는 함수 스코프 내에서 호이스팅됩니다. 이는 변수를 선언하기 전에 해당 변수에 접근하면 undefined가 반환된다는 것을 의미합니다.

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

위 예제에서 var x 선언은 스코프의 상단으로 호이스팅되지만, 초기화는 선언된 위치에서 이루어집니다. 따라서 첫 번째 console.log는 undefined를 출력합니다.

let과 const

let과 const로 선언된 변수도 호이스팅되지만, 초기화 전에 접근할 수 없습니다. 이는 일시적 사각지대(TDZ, Temporal Dead Zone)로 인해 발생합니다.

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

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

위 예제에서 let과 const로 선언된 변수는 초기화 전에 접근하면 ReferenceError가 발생합니다.

함수 호이스팅

함수 선언은 함수 전체가 호이스팅됩니다. 따라서 함수 선언 전에 호출할 수 있습니다.

console.log(myFunction()); // "Hello, world!"

function myFunction() {
  return "Hello, world!";
}

위 예제에서 myFunction 선언은 스코프의 상단으로 호이스팅되므로, 함수 선언 전에 호출할 수 있습니다.

함수 표현식

함수 표현식은 변수 호이스팅과 유사하게 동작합니다. 변수 선언만 호이스팅되고, 할당된 함수는 호이스팅되지 않습니다.

// console.log(myFuncExpr()); // TypeError: myFuncExpr is not a function
var myFuncExpr = function() {
  return "Hello, world!";
};
console.log(myFuncExpr()); // "Hello, world!"

위 예제에서 함수 표현식은 변수 myFuncExpr가 선언되기 전에 호출되면 TypeError가 발생합니다.

호이스팅의 시각적 설명

호이스팅은 코드를 다음과 같이 재구성한 것처럼 동작합니다.

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

위 코드는 다음과 같이 호이스팅됩니다.

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

let과 const의 경우, 호이스팅되지만 초기화 전에 접근할 수 없기 때문에 TDZ가 적용됩니다.

결론

호이스팅은 JavaScript의 중요한 개념으로, 변수가 선언되기 전에 참조될 수 있게 합니다. 하지만 let과 const는 TDZ로 인해 초기화 전에 접근할 수 없으며, 함수 선언은 완전히 호이스팅되어 선언 전에 호출할 수 있습니다. 호이스팅을 이해하면 코드의 동작 방식을 예측하고, 오류를 방지할 수 있습니다.

다음시간에 계속…