JavaScript를 처음 사용하는 경우 변수가 정의되지 않은 것처럼 보이거나 ReferenceError와 같은 오류가 예기치 않게 나타나는 혼란스러운 상황에 직면했을 수 있습니다. 이는 종종 호이스팅(hoisting)이라는 개념으로 거슬러 올라갈 수 있습니다. 그러면 호이스팅이란 무엇이며 코드에 어떤 영향을 미치나요?

이 가이드에서는 호이스팅의 개념과 JavaScript에서 호이스팅이 작동하는 방식을 자세히 살펴보겠습니다. 결국에는 호이스팅이 발생하는 이유와 일반적인 실수를 피할 수 있는 방법을 이해하게 될 것입니다.

호이스팅이란 무엇입니까?
호이스팅은 코드가 실행되기 전에 변수 및 함수 선언을 해당 범위의 맨 위로 이동하는 JavaScript의 동작입니다. 이는 코드가 실제로 실행되기 전 준비 단계에서 선언(할당이 아님)이 처리된다는 의미입니다.

자바스크립트는 먼저 변수와 함수에 메모리를 할당하는 생성 단계를 거칩니다. 그러나 함수와 변수를 처리하는 방식은 약간 다릅니다.

함수 호이스팅: 완전 호이스팅 정의
function 키워드를 사용하여 선언된 함수는 전체 정의와 함께 호이스팅됩니다. 이를 통해 코드에서 실제 선언 전에 함수를 호출하거나 사용할 수 있습니다.

예를 들어:

sum(5, 3); // Output: 8

function sum(a, b) {
  console.log(a   b);
}

sum() 함수가 코드에서 선언되기 전에 호출되더라도 생성 단계에서 함수 선언이 해당 범위의 맨 위로 끌어올려지기 때문에 완벽하게 작동합니다.

변수 호이스팅: var, let, const
변수 호이스팅은 함수 호이스팅과 다르게 동작하며, var, let, const 중 무엇을 사용하는지에 따라 달라집니다.

1. var 선언
var를 사용하여 변수를 선언하면 해당 변수는 기본값이 정의되지 않은 상태로 해당 범위의 맨 위로 끌어올려집니다. 즉, 선언 전에 변수에 액세스할 수 있지만 값을 할당할 때까지 변수는 정의되지 않은 상태로 유지됩니다.

console.log(city); // Output: undefined
var city = "New York";
console.log(city); // Output: "New York"

이 예에서 도시는 처음에 정의되지 않은 값으로 호이스팅됩니다. "New York" 값이 할당되면 두 번째 console.log()는 "New York"을 올바르게 출력합니다.

2. let 및 const 선언
let 및 const를 사용하면 변수도 호이스팅되지만 초기화되지 않은 상태로 유지됩니다. 즉, 선언 전에 액세스하려고 하면 ReferenceError가 발생합니다.

console.log(name); // ReferenceError: Cannot access 'name' before initialization
let name = "John Doe";

이 오류는 let 및 const 변수가 범위 시작과 실제로 선언된 지점 사이의 TDZ(Temporal Dead Zone)에 존재하기 때문에 발생합니다. 이 시간 동안에는 변수를 참조할 수 없습니다.

let과 const의 주요 차이점
let과 const는 모두 호이스팅 측면에서 유사하게 동작하지만 const는 선언 중에 값을 할당해야 하는 반면, let을 사용하면 값을 즉시 할당하지 않고도 변수를 선언할 수 있습니다.

const name = "John Doe"; // Must be initialized
let age; // Can be declared without assignment

호이스팅 실습
함수와 변수 호이스팅을 모두 보여주는 예를 살펴보겠습니다.

console.log(city); // Output: undefined
sum(3, 4);    // Output: 7

function sum(x, y) {
  console.log(x   y);
}

var city = "New York";
console.log(city); // Output: "New York"

여기서 sum 함수는 전체 정의로 호이스팅되므로 함수가 선언되기 전에 호출할 수 있습니다. 그러나 도시는 정의되지 않은 값으로 끌어올려져 첫 번째 console.log()가 정의되지 않은 결과를 출력하는 이유를 설명합니다. 할당이 발생하면 두 번째 console.log()가 올바른 값을 출력합니다.

호이스팅 함정을 피하기 위한 팁
호이스팅으로 인해 발생하는 문제를 방지하려면 다음 모범 사례를 따르세요.

1. - 선언 전에 변수에 액세스하지 않으려면 var 대신 let 및 const를 사용하세요.
2. - 코드가 예상대로 작동하도록 범위 상단에 변수와 함수를 선언하세요.

키 호이스팅 개념 요약

• 호이스팅은 코드가 실행되기 전에 선언을 해당 범위의 맨 위로 이동하는 JavaScript의 동작을 나타냅니다.
• function으로 선언된 함수는 전체 정의와 함께 호이스팅되므로 선언되기 전에 사용할 수 있습니다.
• var로 선언된 변수는 기본값인 정의되지 않은 상태로 끌어올려지는 반면, let 및 const로 선언된 변수는 초기화되지 않은 상태로 유지되므로 선언 전에 액세스하면 ReferenceError가 발생합니다.
• TDZ(임시적 데드 존)는 let 및 const에 적용되어 초기화되기 전에 액세스할 수 없도록 합니다.

호이스팅을 이해하면 JavaScript의 일반적인 문제를 방지하고 보다 예측 가능한 코드를 작성할 수 있습니다. 연습을 통해 이러한 개념은 제2의 천성이 될 것입니다.