[JS] 유효범위와 호이스팅(hoisting)

자바스크립트 유효범위와 호이스팅

자바스크립트의 유효범위는 블록 유효범위(block scope)가 아니라 함수 유효범위(function scope) 입니다.

JAVA나 C/C++같은 언어의 유효범위와는 조금 다릅니다.

function scopeTest() {
    for(var loop = 0; loop < 10; loop++) {
        console.log(loop); // 0~9 출력
    }
    console.log(loop); // 10 출력
}

위의 예제가 이 둘의 차이를 잘 보여주는 코드입니다.

블록 유효범위(block scope)에 익숙하신 분들이라면, 5번라인에서 오류가 발생할 것 이라고 생각할것입니다.

하지만, 함수 유효범위(function scope)에서는 그렇지 않습니다. 

함수 유효범위

함수 유효범위(function scope)에서는 이름 그대로 변수의 유효범위가 함수안으로 한정 됩니다.

함수 밖에서는 접근할 수 없습니다.

그렇기 때문에 위의 예제에서 loop에 접근할 수 있었던 것입니다.

여기서 또 JAVA나 C/C++과는 조금 다른 점이 있습니다. 바로 호이스팅이라 불리는 것입니다.

호이스팅(hoisting)

hoist는 '들어올리다'라는 의미를 가지고 있습니다.

그렇다면, 변수 호이스팅은 무슨의미 일까요?

밑에 있는 '변수선언'을 위로 들어올린다고 생각하시면 됩니다.

var after = "before";
function scopeTest() {
    console.log(loop); // undefined 출력
    console.log(after); //undefined 출력
 
    for(var loop = 0; loop < 10; loop++) {
        console.log(loop); // 0~9 출력
    }
 
    console.log(loop); // 10 출력
    var after = "after";
    console.log(after); // "after" 출력
}

var after = "before";
function scopeTest() {
    var after;
    var loop;
    console.log(loop); // undefined 출력
    console.log(after); //undefined 출력
 
    for(loop = 0; loop < 10; loop++) {
        console.log(loop); // 0~9 출력
    }
 
    console.log(loop); // 10 출력
    after = "after";
    console.log(after); // "after" 출력
}

변수선언을 함수 최상위에 한것과 같은 동작을 하는것 입니다.

주목해야 할 점은, '선언'만을 호이스팅된다는 것입니다. '초기화'는 호이스팅 되지 않습니다.

그렇기 때문에, 3, 4번 라인에서 undefined를 출력하게 된것입니다.

지금까지 자바스크립트 유효범위와 호이스팅이었습니다.