JavaScript는 종종 초보자에게 혼란을 줄 수 있는 방식으로 동작하는 언어입니다. 그러한 동작 중 하나는 모든 JavaScript 개발자가 더 예측 가능한 코드를 작성하기 위해 이해해야 하는 개념인 호이스팅입니다. 이 글에서는 호이스팅이 무엇인지, 호이스팅이 변수 및 함수와 어떻게 작동하는지, 그리고 이와 관련된 함정을 피할 수 있는 방법을 살펴보겠습니다.

호이스팅이란 무엇입니까?

호이스팅은 선언(초기화는 아님)을 해당 범위의 맨 위로 이동하는 JavaScript의 기본 동작을 나타냅니다. 이는 코드가 실행되기 전 컴파일 단계에서 발생합니다. 즉, 코드에서 실제로 선언되기 전에 변수와 함수를 사용할 수 있습니다.

예:

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

이 예에서는 myVar이 선언되기 전에 사용되었기 때문에 ReferenceError가 발생할 수 있습니다. 그러나 호이스팅으로 인해 실제로는 var myVar 선언이 해당 범위의 맨 위로 이동되고 할당(myVar = 5)은 그대로 유지됩니다. 내부적으로 JavaScript는 이를 다음과 같이 해석합니다.

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

이 때문에 myVar는 정의되었지만 console.log가 실행될 때 아직 할당되지 않았으므로 undefound가 출력됩니다.

호이스팅 및 변수

호이스팅이 var, let, const 등 다양한 유형의 변수에서 작동하는 방식을 분석해 보겠습니다.

1. var 호이스팅

var를 사용하면 선언과 변수가 모두 호이스팅됩니다. 그러나 할당은 이동되지 않고 선언만 이동됩니다.

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

var a 선언이 호이스팅되었지만 할당이 나중에 발생하므로 a는 기록될 때 정의되지 않습니다.

2. let 및 const 게양

let 및 const로 선언된 변수도 호이스팅되지만 var처럼 undefine으로 초기화되지는 않습니다. 대신 범위 시작부터 선언이 나타날 때까지 TDZ(Temporal Dead Zone)에 들어갑니다.

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

여기서 b는 호이스팅되었지만 실제 선언 줄이 실행될 때까지 사용할 수 없으므로 ReferenceError가 발생합니다.

동일한 동작이 const에도 적용되며, const 변수는 선언 시 초기화되어야 한다는 추가 규칙이 있습니다.

호이스팅 및 기능

함수 선언은 완전히 호이스팅됩니다. 즉, 함수 이름과 본문이 모두 범위의 맨 위로 이동됩니다. 이를 통해 함수가 선언되기 전에 호출할 수 있습니다.

함수 선언 예:

greet(); // "Hello, World!"

function greet() {
  console.log("Hello, World!");
}

여기서 함수 선언인 Greeting이 완전히 호이스팅되었으므로 코드가 정의에 도달하기 전에도 함수를 호출할 수 있습니다.

함수 표현식과 호이스팅

그러나 함수 표현식은 같은 방식으로 끌어올려지지 않습니다. 할당으로 처리되므로 함수 정의가 아닌 변수 선언만 호이스팅됩니다.

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

var greet = function() {
  console.log("Hello, World!");
};

이 경우 Greeting 변수가 호이스팅 되었지만 호이스팅 과정에서 정의되지 않은 값이 할당되었습니다. 그렇기 때문에 할당 전에 Greeting()을 호출하면 TypeError가 발생합니다.

호이스팅 함정 방지

호이스팅으로 인한 혼란을 피하려면 다음 모범 사례를 따르세요.

1. 범위 상단에서 변수 선언 – 호이스팅을 통해 선언이 맨 위로 이동하더라도 해당 범위의 시작 부분에서 변수를 선언하는 것이 좋습니다. 이렇게 하면 코드를 더 읽기 쉽고 예측하기 쉬워집니다.

2. var 대신 let과 const를 사용하세요. – let과 const로 선언된 변수는 블록 범위이므로 호이스팅 동작이 더 명확해지고 버그가 발생할 가능성이 줄어듭니다. 또한 초기화 전에 변수를 실수로 참조할 가능성도 줄어듭니다.

3. 함수 선언 구성 – 호이스팅 동작에 의존하지 않도록 함수를 사용하기 전에 선언하세요.

결론

호이스팅은 JavaScript의 많은 특징 중 하나이지만, 그것이 어떻게 작동하는지 이해하면 더 깔끔하고 오류가 발생하기 쉬운 코드를 작성하는 데 도움이 될 수 있습니다. 함수 선언과 변수는 모두 호이스팅되지만 다르게 동작한다는 점을 기억하세요. var보다는 let과 const를 고수하고, 예상치 못한 일이 발생하지 않도록 코드를 잘 정리하세요.

호이스팅에 주의하면 JavaScript 코드를 더 예측 가능하고 유지 관리하기 쉽게 만들 수 있습니다.