[JavaScript] 호이스팅(Hoisting)

1. 호이스팅(Hoisting)

호이스팅(Hoisting)은 자바스크립트에서 변수 선언과 함수 선언이 해당 스코프의 맨 위로 "끌어올려지는" 동작을 말합니다. 이는 코드 실행 전에 변수와 함수가 메모리에 할당되는 것처럼 동작하여, 변수와 함수를 선언하기 전에도 사용할 수 있는 특징을 갖고 있습니다.

 

1-1. 변수 호이스팅

변수 선언은 실제 코드의 위치와 상관없이 해당 스코프의 맨 위로 끌어올려집니다. 즉, 변수를 선언하기 전에도 변수를 사용할 수 있습니다. 그러나 변수의 초기화는 원래 코드의 위치에 따라 이루어지므로, 선언 전에 변수에 접근하면 undefined가 할당됩니다.

 

1-2. 함수 호이스팅

함수 선언도 변수 선언과 마찬가지로 해당 스코프의 맨 위로 끌어올려집니다. 함수 선언문은 변수에 할당된 함수 표현식과 달리 호이스팅될 때 함수 자체가 끌어올려지므로, 함수를 선언하기 전에도 함수를 호출할 수 있습니다.

 

예시)

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

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

 

위의 코드에서 var x = 5;는 변수 x를 선언하고 초기화하는 구문으로 console.log(x);를 var x = 5; 이전에 호출하면 undefined가 출력됩니다.

이는 변수 선언이 호이스팅되어 console.log(x); 구문 이전에 var x;가 실행되기 때문입니다.

또한 foo();는 함수 foo를 호출하는 구문입니다. 함수 foo는 function foo() { ... } 형태로 선언되어 있습니다. 함수 선언문이 호이스팅되기 때문에 foo();를 function foo() { ... } 이전에 호출해도 정상적으로 동작하여 "Hello, world!"가 출력됩니다.

호이스팅은 자바스크립트의 독특한 동작 중 하나이지만, 코드의 가독성과 유지보수를 위해 변수와 함수를 선언한 위치에 가깝게 작성하는 것이 권장됩니다.