자바스크립트 호이스팅

호이스팅은 자바스크립트에서 변수와 함수 선언이 코드의 최상위로 끌어올려지는 동작을 말한다.

1. 기본 개념

1-1. 변수 호이스팅

• var 키워드로 선언된 변수는 선언만 최상위로 이동하고, 할당은 원래 위치에서 진행된다.
• 예를 들어, 다음 코드를 살펴보자:
• function a(x) { console.log(x); // 1 var x; // 2 console.log(x); // 3 x = 2; // 4 console.log(x); // 5 } a(1);
• 이 코드에서 var x;는 함수의 최상위로 끌어올려진다. 그래서 함수의 실행 흐름은 다음과 같다:
  • 첫 번째 console.log(x);는 매개변수 x의 값이 1이므로 1이 출력된다.
  • 두 번째 console.log(x);는 변수 x가 선언된 후이지만 값이 할당되지 않았으므로 undefined가 출력된다.
  • x = 2;로 값을 할당한 후, 마지막 console.log(x);는 2를 출력한다.

 

1-2. 함수 호이스팅

• 함수 선언은 전체가 호이스팅된다. 즉, 함수의 정의가 스코프의 최상위로 끌어올려진다.
• 예를 들어, 다음 코드를 살펴보자:
• function a() { console.log(b); // 1 var b = 'bbb'; // 2 console.log(b); // 3 function b() { } // 4 console.log(b); // 5 } a();
• 이 코드에서 function b() { }는 전체가 호이스팅된다. 그래서 함수 a의 최상위에 함수 b가 정의된 것으로 간주된다.
• 함수의 실행 흐름은 다음과 같다:
  • 첫 번째 console.log(b);는 함수 b를 호출하려고 하지만, b는 함수로 정의되어 있으므로 function b() { }가 출력된다.
  • var b = 'bbb';는 함수 b의 정의 이후에 할당되기 때문에, 두 번째 console.log(b);는 bbb를 출력한다.
  • 마지막 console.log(b);도 bbb를 출력한다.

 

 

2. 요약

• 변수 호이스팅: var로 선언된 변수는 선언부만 최상위로 이동하고, 할당은 원래 위치에서 이루어진다.
• 함수 호이스팅: 함수 선언은 전체가 최상위로 이동한다. 따라서 함수가 정의되기 전에도 호출할 수 있다.

 

호이스팅의 핵심은 변수를 선언한 부분만 이동하고, 값을 할당하는 부분은 원래 위치에서 진행된다는 점이다. 함수의 경우 전체 정의가 이동하기 때문에 함수 호출 위치와 관계없이 사용할 수 있다.