자바스크립트 scope(유효범위)와 Hoisting(호이스팅)

자바스크립트 scope(유효범위)와 Hoisting(호이스팅)

자바스크립트는 다른 언어와 달리 변수의 개념이 조금 다르다는 것을 알게 되었고 간단하게 정리하였습니다.

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

변수의 범위는 변수를 선언한 장소에 따라 결정된다. 구체적으로 함수 밖에서 선언한 변수는 전역변수가 되며 함수에서 선언한 변수는 지역변수가 된다.

또한 자바스크립트는 같은 변수명이 같더라도 오류가 발생하지 않습니다.

var scope = 'a'
console.log(scope); --> a
var scope = 'b'
console.log(scope); --> b

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

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

같은 이름이라도 선언된 위치에 따라 다른 변수라는 점에 주의해야합니다.

함수 단위의 유효범위

아래 예제는 함수 단위의 유효범위를 보여주기 위한 다른 예제입니다.

예를들어  자바의 경우 {} 블록 단위에서 선언된 변수라면 블록안에서 선언된 변수를 사용할 수 있습니다. 하지만 유연한 자바스크립트는 함수안에서 선언된 변수라면 함수안에서 사용할 수 있습니다.

function scopeExample() {  
    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);
}
scopeExample();

결과 값 

scope_c=0

scope_c=1

scope_c=2

scope_c=3

scope_c=4

scope_c=5

scope_b=0

var 키워드 생략

함수단위의 유효범위에서 함수 안에 변수를 선언하여 사용할 경우 지역변수라는 것을 알 수 있습니다.

지역변수에서 var을 제거하면 어떻게 될까? var 명령은 생략 할 수 있기 때문에 구문상으로는 맞는 코드이지만 결과는 변하게 됩니다. 바꾸어 말아면 자바스크립트에서 var 선언되지 않은 변수 모두 전역변수로 간주됩니다.

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

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

var 키워드 생략의 주의사항!

대입을 연속적으로 하는 것을 피하도록 한다. 예를 들어 아래와 같은 코드는

x는 지역 범위에 속하지만 후자는 전역 스코프가 됩니다. = 연산자가 오른쪽 결합의 성질을 갖기 때문에 y, z는 암묵적으로 전역변수가 생성되고 그 결과인 100이 선언된 변수 x에 대입됩니다.

function exampleVar(){
    var x = y = z = 100;
    console.log(x); --> 100
}

exampleVar();
console.log(y); --> 100
console.log(z); --> 100

호이스팅이란 ?

호이스팅이란 단어를 직역하면 끌어올리다라는 의미입니다. 자바스크립트에서도 선언된 변수를 끌어올린다는 의미로 해석하면 됩니다.

지역 변수가 선언되기 전에 변수 scope를 참조한 경우 undefined가 반환됩니다. 이것은 지역변수 scope 자체는 함수 전체에서 유효하지만 값은 아직 대입되지 않았기 때문에 일어나는 동작입니다. 지역 변수가 대입되어 있지 않다고 해서 같은 이름의 전역변수를 참조하는 것은 아닙니다. 이러한 동작을 호이스팅이라고 합니다.

var scope = 'Global';

function exampleVar(){
    console.log(scope); --> undefined  Global을 기대했지만 아니네.
    var scope = 'Local';
    console.log(scope); --> Local
}

exampleVar();

호이스팅을 설명하기 위한 간단한 예제

hoistingTest에서 변수 a를 두 번 호출하고 있습니다.  한 번은 변수 선언하기 전에 호출하고, 선언 후 호출하게 됩니다. 자바와 같은 경우 선언문 전에 호출되면 에러가 발생하지만 자바스크립트는 호이스팅 됨으로써 예제2와 같은 구동이 이루어집니다.

변수 선언문이 유효범위 안의 제일 상단부로 끌어올려 지게 되고, 선언문이 있던 자리에서 초기화가 이루어지는 결과를 갖는 것입니다. 그 실행결과 첫 번째 호출에서는 초기화가 되지 않은 undefined가, 두 번째 호출에서는 초기화된 값이 나옵니다.

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

예제1

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

예제2