JavaScript에서 호이스팅(Hoisting)이 가능한 이유

JavaScript에서 호이스팅(hoisting)은 변수나 함수 선언이 코드의 실행 전에 해당 스코프의 최상단으로 "끌어올려지는" 현상을 말합니다. 이는 JavaScript 엔진이 코드를 실행하기 전에 두 단계(컴파일 단계와 실행 단계)를 거치기 때문에 가능합니다.

호이스팅의 메커니즘

1. 컴파일 단계
JavaScript 엔진은 코드를 실행하기 전에 먼저 컴파일 단계(또는 생성 단계)를 거칩니다. 이 단계에서 엔진은 소스 코드를 분석하여 변수와 함수 선언을 메모리에 할당합니다.

변수 선언 (var)
var로 선언된 변수는 스코프 내에서 메모리에 등록되며, 초기값으로 undefined가 설정됩니다. 실제 값 할당은 실행 단계에서 이루어집니다.

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

위 코드에서 myVar는 컴파일 단계에서 메모리에 등록되고 undefined로 초기화됩니다. 첫 번째 console.log는 undefined를 출력하고, 실행 단계에서 5가 할당됩니다.

함수 선언
함수 선언은 전체 함수 정의(함수 이름과 바디 포함)가 메모리에 등록됩니다. 따라서 함수는 선언 전에 호출해도 정상적으로 실행됩니다.

sayHello(); // "Hello!"
function sayHello() {
  console.log("Hello!");
}

sayHello 함수는 컴파일 단계에서 메모리에 등록되므로 선언 전에 호출 가능합니다.

2. 실행 단계
컴파일 단계에서 메모리에 등록된 변수와 함수가 실제로 실행됩니다.

• var 변수는 할당된 값을 받습니다.
• 함수가 호출되면 정의된 코드가 실행됩니다.
• let과 const 변수는 선언 위치에서 초기화 및 할당이 이루어집니다.

호이스팅은 컴파일 단계에서 변수와 함수 선언이 스코프 최상단으로 끌어올려지는 것처럼 동작하므로, 코드의 물리적 위치와 상관없이 선언이 먼저 처리됩니다.

호이스팅의 프론트엔드 관련 중요성

프론트엔드 개발에서 호이스팅은 코드 작성 시 주의가 필요한 특성입니다.

• 버그 방지
  선언 전에 변수나 함수를 사용하면 의도치 않은 동작(예: undefined 출력)이 발생할 수 있습니다. 이를 방지하려면 변수 선언을 스코프 상단에 배치하거나 let, const를 사용하는 것이 좋습니다.
• 코드 가독성
  호이스팅에 의존하면 코드의 실행 흐름이 직관적이지 않을 수 있습니다. 명시적인 선언 순서를 유지하는 것이 유지보수에 유리합니다.
• ES6 이후 권장사항
  let과 const는 호이스팅이 제한적이므로, 현대 프론트엔드 개발에서는 var 대신 이를 사용하는 것이 표준입니다.

정리

JavaScript에서 호이스팅은 엔진이 코드를 컴파일 단계와 실행 단계를 거쳐 처리합니다.
컴파일 단계에서 var 변수와 함수 선언이 스코프 최상단으로 끌어올려져 메모리에 등록됩니다. var는 undefined로 초기화되고, 함수 선언은 전체 정의가 등록되어 선언 전에 호출할 수 있습니다. 반면, let과 const는 호이스팅되지만 초기화되지 않아 선언 전 접근 시 ReferenceError가 발생합니다.

호이스팅은 코드의 유연성을 제공하지만, var 사용 시 undefined로 인한 버그나 가독성 문제가 발생할 수 있습니다. 따라서 프론트엔드 개발에서는 let과 const를 사용하고, 선언을 스코프 상단에 배치하여 호이스팅 의존성을 최소화하는 것이 권장됩니다.