[Javascript] Scope, Hoisting

1. 함수 단위의 유효범위와 변수명 중복

변수의 범위는 변수를 선언한 장소에 따라 결정

함수 밖에서 선언한 변수는 전역변수가 되고 함수에서 선언한 변수는 지역변수가 됨

 

var scope = 'Global';
function test() {
    var scope = 'Local';
    return scope;
}

console.log(test()); --> Local
console.log(scope);  --> Global

 

2. 함수 단위의 유효범위

함수 안에서 선언된 변수라면 함수 안에서 사용 가능

function scopeTest() {  
    var scope_a = 0;
    if (true) {
        var scope_b = 0;
        for (var scope_c = 0; scope_c < 5; scope_c++) {
            console.log("scope_c=" + scope_c);
         }
         console.log("scope_c=" + scope_c);
    }
    console.log("scope_b=" + scope_b);
}
scopeTest();

 

3. var 키워드 생략

함수단위의 유효범위에서 함수 안에 변수를 선언하여 사용할 경우는 지역변수

지역변수에서 var를 제거하면 var가 선언되지 않은 변수 모두 전역변수로 간주

var scope = 'Global';
function test() {
    scope = 'Local';
    return scope;
}

console.log(test()); --> Local
console.log(scope); --> Local

 

4. 호이스팅

선언된 변수를 끌어올린다는 의미

지역 변수가 선언되기 전에 변수 scope를 참조한 경우 undefined가 반환

이것은 지역변수 scope 자체는 함수 전체에서 유효하지만 값은 아직 대입되지 않았기 때문에 일어나는 동작

지역 변수가 대입되어 있지 않다고 해서 같은 이름의 전역변수를 참조하는 것은 아님

var scope = 'Global';

function test(){
    console.log(scope); --> undefined
    var scope = 'Local';
    console.log(scope); --> Local
}

test();

 

function hoistingTest1(){  
    console.log(a); --> undefined
    var a = 1;
    console.log(a); --> 1
}


function hoistingTest2(){  
    var a;
    console.log(a); --> undefined
    a = 1;
    console.log(a); --> 1
}

 

hoistingTest에서 변수 a를 두 번 호출하는데, 한 번은 변수 선언하기 전에 호출하고, 선언 후 호출한다.

자바와 같은 경우 선언문 전에 호출되면 에러가 발생하지만, 자바스크립트는 호이스팅 됨으로써 hoistingTest2와 같은 구동이 이루어진다.

변수 선언문이 유효범위 안의 제일 상단부로 끌어올려 지게 되고,

선언문이 있던 자리에서 초기화가 이루어진다.

그 실행결과 첫 번째 호출에서는 초기화가 되지 않은 undefined가, 두 번째 호출에서는 초기화된 값이 나온다.