230826 개발일지 TIL - 자바스크립트의 호이스팅(Hoisting)

1. 호이스팅(Hoisting)이란?

자바스크립트에서 변수와 함수 선언을 해당 스코프의 최상단으로 끌어올리는 것을 말한다. 코드를 실행하기 전에 자바스크립트 엔진이 변수와 함수 선언을 먼저 메모리에 할당하기 때문에 발생하는 현상이다.

2. 변수 호이스팅

변수 선언(var)은 호이스팅되며, 선언부가 스코프의 최상단으로 이동된다. 그러나 값의 할당 부분은 원래 위치에 남아 있다.

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

위 예시에서 x 변수는 console.log(x) 문장 앞에서 참조되었지만 undefined로 출력된다. 왜냐하면 var x;가 최상단으로 이동되어 선언된 후 초기값 없이 할당된 것과 같기 때문이다.

3. 함수 호이스팅

함수 선언식(Function Declaration)도 마찬가지로 호이스팅된다. 함수 선언식은 전체가 끌어올려지며, 실제 위치와 상관없이 어디서든 호출할 수 있다.

foo(); // "Hello!"

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

하지만 주의할 점은, 함수 표현식(Function Expression)인 경우에는 호이스팅 되지 않는다.

bar(); // TypeError: bar is not a function

var bar = function() {
  console.log("World!");
};

위 예시에서 bar()를 호출하면 에러가 발생한다. 왜냐하면 bar 변수는 이미 최상단으로 올라갔으나 그 값인 함수 표현식이 아직 할당되지 않았기 때문이다.

4. 결론

자바스크립트에서 호이스팅은 코드의 실행 전에 변수와 함수 선언을 먼저 인식하게 만든다. 올바르게 활용하면 코드의 가독성과 유지 보수성을 향상시킬 수 있다.

하지만 값의 할당은 원래 위치에서 그대로 이루어지므로, 변수를 선언하기 전에 참조하거나 함수를 정의하기 전에 호출하는 동작은 주의가 필요하다.