[JS] 함수 호이스팅(Hoisting)

함수 호이스팅(hoisting)

자바스크립트에서 함수의 유효 범위라는 것은 함수 안에서 선언된 모든 변수는 함수 전체에 걸쳐 유효하다는 의미이다.

 

그런데 이 유효 범위의 적용이 변수가 선언되기 전에도 똑같이 적용된다.

이러한 자바스크립트의 특징을 함수 호이스팅(hoisting)이라고 한다.

즉, 자바스크립트 함수 안에 있는 모든 변수의 선언은 함수의 맨 처음으로 이동된 것처럼 동작한다.

 

var globalNum = 10;     // globalNum을 전역 변수로 선언함.

function printNum() {
    document.write("지역 변수 globalNum 선언 전의 globalNum의 값은 " + globalNum + "입니다.<br>");
    var globalNum = 20; // globalNum을 지역 변수로 선언함. // 1
    document.write("지역 변수 globalNum 선언 후의 globalNum의 값은 " + globalNum + "입니다.<br>");

}
printNum()

위의 예제 1의 시점에서는 변수 globalNum가 전역 변수를 가리킨다고 생각한다.

하지만 자바스크립트 내부에서는 함수 호이스팅에 의해 다음과 같이 코드가 변경되어 처리됩니다.

 

var globalNum = 10;

function printNum() {
    var globalNum; // 함수 호이스팅에 의해 변수의 선언 부분이 함수의 맨 처음 부분으로 이동됨.
    
    document.write("지역 변수 globalNum 선언 전의 globalNum의 값은 " + globalNum + "입니다.<br>");
    globalNum = 20;
    document.write("지역 변수 globalNum 선언 후의 globalNum의 값은 " + globalNum + "입니다.<br>");
}
printNum();

위의 예제 ①의 시점에서는 globalNum라는 지역 변수가 선언만 되어 있고, 아직 초기화만 안 된 상태이다.

따라서 이때 globalNum 변수에 접근하면 아직 초기화되지 않은 변수에 접근했으므로, undefined 값을 반환하게 된다.

실제로 변수가 초기화되는 시점은 원래 코드에서 변수가 선언된 ②의 시점이다.

 

다른 프로그래밍 언어에 익숙해져있다면 이 함수 호이스팅은 상당히 난해하다.

아마도 같은 이름으로 선언하는게 가능한 var의 특성 때문에 이런 현상이 일어나는 듯 하다.

자바스크립트에서는 항상 함수 블록의 첫 부분에 변수를 선언하는 것이 좋을 듯 하다.