FrontEndJavaScript

[JS] 호이스팅(Hoisting)

FrontEnd, JavaScript

자바스크립트의 호이스팅(Hoisting)

Hoisting이란, 선언을 현재 스크립트 또는 현재 함수의 맨 위로 이동시키는 JavaScript의 기본 동작이다. 만약, 변수가 함수 내에서 정의되었을 경우 선언이 함수 내부의 최상위로 호이스팅되고, 함수 밖에 정의되었을 경우에는 선언이 전역 컨텍스트의 최상위로 호이스팅 된다.

호이스팅 때문에 변수를 선언하기 전에 사용할 수 있다.

JavaScript에서는 변수를 선언하기 전에 사용할 수 있다. 아래에 선언을 해도 선언한 것이 Hoisting 되어 위로 끌어올려지기 때문이다. 아래의 Code-1과 Code-2는 동일한 코드라고 보면 된다.

Code-1

1
2
3
4
5
6
x = 5; // x에 값을 할당
 
elem = document.getElementById("demo");
elem.innerHTML = x; //출력 결과 > 5
 
var x; // x 선언

Code-2

1
2
3
4
5
var x; // x 선언
x = 5; // x에 값을 할당
 
elem = document.getElementById("demo");
elem.innerHTML = x; //출력 결과 > 5


할당은 호이스팅하지 않고, 선언만 호이스팅한다.

JavaScript는 Hoisting을 할 때, 선언만 Hoisting하고, 할당은 Hoisting을 하지 않는다. 다음 Code-3과 Code-4는 동일한 코드라고 보면 된다.

Code-3

1
2
3
4
5
6
var x = 5; // x를 선언하고 x에 5를 할당
 
elem = document.getElementById("demo");
elem.innerHTML = x + " " + y; // 출력 결과 > 5 undefined
 
var y = 7; // y를 선언하고 y에 7을 할당

Code-4

1
2
3
4
5
6
7
var x = 5; // x를 선언하고 x에 5를 할당
var y; // y를 선언
 
elem = document.getElementById("demo");
elem.innerHTML = x + " " + y; // 출력 결과 > 5 undefined
 
y = 7; // y에 7을 할당

위의 Code-3과 Code-4에서 y에 할당된 값인 7이 출력되지 않고 undefined가 출력되는 이유는, 선언만 위쪽으로 끌어 올려지고(Hoisting), 할당은 위로 끌어 올려지지 않기 때문이다. hosting으로 인해 y는 사용되기 전에 선언은 되었지만, 할당이 수행되지 않았기 때문에 y값은 undefined가 되는 것이다.

Hosting은 많은 개발자에게 알려지지 않거나 간과 된 JavaScript의 동작인데, 개발자가 Hosting을 이해하지 못하면 프로그램에 버그가 있을 수 있다. 따라서, 버그를 피하려면 항상 모든 범위의 시작 부분에 모든 변수를 선언하고 할당해야 한다.

Share