[javascript] 호이스팅이란?

호이스팅(hoisting)은 JavaScript에서 변수 및 함수 선언이 코드의 맨 위로 끌어올려지는 현상을 가리킨다. 호이스팅은 코드가 실행되기 전에 JavaScript 엔진에 의해 처리된다.

 

1. 변수의 호이스팅

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

 

위 코드블럭을 살펴보면 x라는 변수는 선언과 동시에 값이 할당되고 1번째 줄의 console.log(x)는 undefined를 반환하였다.

 

여기서 의문을 가질 수 있다. 변수 x는 5가 아닌 undefined인데 호이스팅이 발생하지 않은 것 아닌가??  아니다.

 x가 선언되지 않았다면 undefined가 아닌 아래와 같은 오류를 뱉었어야 한다.

Uncaught ReferenceError: x is not defined

 

이와 같이, 변수의 경우, 선언은 끌어올려지지만 할당은 끌어올려지지 않는다는 특성이 있다.

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

 

위 예제는 선언에서 호이스팅이 발생하여 실제로는 위와 같은 순서로 실행된 것이다.

 

 

2. 함수의 호이스팅

foo(); // "Hello, world!"

function foo() {
  console.log("Hello, world!");
}

 

함수의 경우 function foo()를 아래쪽에 작성했어도 위 foo(); 는 정상적으로 "Hello, world!"를 출력한다.

function foo() {
  console.log("Hello, world!");
}

foo(); // "Hello, world!"

 

실제로는 위와 같은 순서로 실행된 것이다.

 

3. 정리

 

호이스팅은 개발자가 코드를 작성할 때 주의해야 할 중요한 특징 중 하나이다. 코드를 이해하고 예상한 대로 동작하도록 하기 위해서는 변수와 함수 선언을 코드의 맨 위에 명시적으로 작성하는 것이 좋다고 생각한다.

 

또한 추후 유지보수나 인수인계를 위해서도 업무 흐름대로 쉽게 읽을 수 있는 코드가 좋은 코드라고 생각한다.