Fundamentals/JavaScript
자바스크립트 호이스팅
sod0l
2024. 9. 9. 18:24
호이스팅은 자바스크립트에서 변수와 함수 선언이 코드의 최상위로 끌어올려지는 동작을 말한다.
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
로 선언된 변수는 선언부만 최상위로 이동하고, 할당은 원래 위치에서 이루어진다. - 함수 호이스팅: 함수 선언은 전체가 최상위로 이동한다. 따라서 함수가 정의되기 전에도 호출할 수 있다.
호이스팅의 핵심은 변수를 선언한 부분만 이동하고, 값을 할당하는 부분은 원래 위치에서 진행된다는 점이다. 함수의 경우 전체 정의가 이동하기 때문에 함수 호출 위치와 관계없이 사용할 수 있다.