javascript 호이스팅(Hoisting)

 

호이스팅은 런타임이 아닌 컴파일 단계에서 발생하는 자바스크립트의 실행 방식이자 규칙이다. 자바스크립트 엔진이 코드를 실행하기 전에 코드의 선언부를 미리 처리하기 때문에, 실제 실행 시점에서는 마치 선언이 코드의 최상단으로 끌어올려진 것처럼 동작한다.

 

자바스크립트 실행 과정

자바스크립트는 인터프리터 언어이면서도, 실행 전에 컴파일 단계를 거치는 방식으로 작동합니다. 실행 과정은 크게 두 단계로 이루어진다.

1. 컴파일 단계
   • 변수와 함수의 선언을 먼저 확인하여 메모리에 할당.
   • var 변수는 undefined로 초기화하고, let과 const는 초기화하지 않은 상태로 메모리에 할당 (TDZ 상태).
   • 함수 선언은 코드 전체가 메모리에 할당.
2. 실행(런타임) 단계
   • 코드를 한 줄씩 해석하고 실행.
   • 이때 컴파일 단계에서 미리 할당된 변수와 함수를 참조하면서 실행이 진행됨.

 

호이스팅(Hoisting) 이란?

 

자바스크립트의 독특한 동작 방식 중 하나로, 변수나 함수의 선언이 해당 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 현상을 말한다. 이로 인해, 코드를 작성한 순서와는 다르게 실행되는 경우가 생길 수 있고, 호이스팅은 변수와 함수에서 각각 다르게 동작하므로, 이를 이해하는 것이 중요하다.

 

자바스크립트에서 var 키워드로 선언한 변수는 스코프의 최상단으로 선언만 끌어올려지고 초기화는 그대로 남아 있게 된다. 따라서 var 변수를 선언 전에 참조하면 undefined 값을 가지며, 오류가 발생하지 않는다.

 

호이스팅이 발생하는 이유

자바스크립트는 실행을 시작하기 전에 변수와 함수 선언을 미리 처리하여 메모리 공간을 확보해둔다. 이로 인해 코드가 선언부에 도달하기 전에 해당 변수나 함수에 접근할 수 있는 것처럼 보이는 것이다. 하지만 이는 런타임 시점에 이루어지는 것이 아니라 컴파일 시점에 메모리 할당을 통해 발생하는 동작이다.

요약하자면, 호이스팅은 컴파일 시점에 이루어지는 자바스크립트의 특성이며, 덕분에 변수와 함수가 실제 코드 위치보다 앞에서 사용될 수 있는 것처럼 동작하게 된다.

console.log(a); // undefined (오류 발생 X)
var a = 10;
console.log(a); // 10

위 코드의 실제 동작 방식은  let과 const로 선언된 변수는 호이스팅이 발생하지만, 초기화가 이루어지기 전까지는 사용할 수 없다. 이로 인해, 해당 변수를 선언하기 전에 접근하면 ReferenceError가 발생하고 이 상태를 "Temporal Dead Zone (TDZ)"이라 부른다.

console.log(b); // ReferenceError
let b = 20;

 

2. 함수의 호이스팅

함수 선언(function 키워드로 정의된 함수)은 변수와 다르게, 선언과 정의(함수 내용 전체)가 모두 스코프의 최상단으로 끌어올려진다. 그래서 함수 선언을 코드에서 호출보다 뒤에 위치시키더라도 문제 없이 호출이 가능하다.

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

반면, 함수 표현식(예: const greet = function() {...})으로 정의된 함수는 변수의 호이스팅 규칙을 따른다. let이나 const로 정의된 함수 표현식은 선언 전에 호출하려고 하면 오류가 발생한다.

greet(); // ReferenceError
const greet = function() {
    console.log("Hi");
};

 

호이스팅 부작용을 줄이는 방법

호이스팅은 코드의 가독성을 떨어뜨리고 예상치 못한 버그를 유발할 수 있기 때문에, 이를 피하기 위해 다음과 같은 코딩 규칙을 지키는 것이 좋다

1. 변수는 항상 상단에서 선언.
2. let과 const를 사용하여 변수의 범위를 명확히 하며, 선언 전에 사용하는 실수를 방지.
3. 함수는 선언 위치를 호출보다 위로 올려서 가독성을 유지.