[Javascript] 함수 호이스팅( hoisting )

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

 

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

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

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

 

- 예제

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

function printNum() {

    document.write("지역 변수 globalNum 선언 전의 globalNum의 값은 " + globalNum + "입니다.<br>"); // ①

    var globalNum = 20; // globalNum을 지역 변수로 선언함. // ②

    document.write("지역 변수 globalNum 선언 후의 globalNum의 값은 " + globalNum + "입니다.<br>");

}

printNum();

위의 예제 ①의 시점에서는 변수 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 변수에 접근하면 아직 초기화되지 않은 변수에 접근했으므로, undifined 값을 반환하게 됩니다.

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

 

 

• 자바스크립트에서는 함수 호이스팅이 자동으로 수행되지만, 항상 함수 블록의 첫 부분에 변수를 선언하는 것이 좋습니다.

 

참조

http://tcpschool.com/javascript/js_function_functionScope

코딩교육 티씨피스쿨