유효범위(Scope)

유효범위(Scope)

변수가 어디까지 영향을 미치는가에 대한 범위를 유효범위라고 한다.

유효범위는 크게 지역변수(local variable)와 전역변수(global variable)로 나뉜다. 자바스크립트의 지역변수는 함수에서만 유효하다.

전역변수

자바스크립트에선 함수 밖에서 정의된 변수

// 전역함수 예1
var scope = 'global';
function gscope(){
	console.log(scope);
}
gscope();

// 전역함수 예2
for(var i = 0; i < 5; i++){       // for문에 들어가는 변수 i도 함수밖이기 때문에 전역함수이다.
    a();
    document.write(i);
}

 

지역변수

자바스크립트에선 함수 안에서 정의된 변수 함수 블록{} 안에서만 유효하다.

// 전역함수 예1
function gscope(){
	var scope = 'global';
	console.log(scope);
}
gscope();

 

전역변수와 지역변수의 유효범위

var vscope = 'global';
function fscope(){
    var vscope = 'local';
    alert(vscope);           
}
fscope();				 // local 출력
alert(vscope);				 // global 출력

함수내에서 var로 vscope의 변수를 선언했기 때문에 함수를 실행했을때 함수내에 있는 vscope의 local값이 출력이 되고 함수 밖에서 실행한 alert은 함수 밖에서 var로 선언된 vscope의 값인 global값이 출력된다.

var vscope = 'global';
function fscope(){
    vscope = 'local';
    alert(vscope);
}
fscope();			  	// local 출력
alert(vscope);				// local 출력

함수내에서 vscope를 var없이 선언할 경우 변수 vscope를 맨 위에서 선언한 vscope로 인식하여 맨위 vscope의 값을 local로 변경했다. 그래서 함수를 실행했을때도 바뀐 local이 출력이 되고 함수밖에 alert을 실행하여도 이미 함수에서 scope의 값을 다시 정의하였기 때문에 local값이 출력된다. ( var를 사용하지 않은 지역변수는 전역변수가 된다.)

전역변수는 그 값이 변경될 수가 있기때문에 전역변수는 되도록이면 사용안하는 편이 좋다. 팀 단위로 프로그래밍할 시 다른 사람의 코드와 합쳐야하는데 그때 같은 이름의 전역변수가 있으면 서로 충돌하여 에러나 버그, , 함수의 동작이 다르게 동작할 수 있다. 변수를 선언할때는 꼭 var을 붙이는것을 습관화 해야하고 전역변수를 사용해야 하는 경우 이유를 정확히 알고 써야한다.

// 지역변수와 전역변수의 차이점

// 1번 예제
function a (){
    var i = 0;
}
for(var i = 0; i < 5; i++){
    a();
    document.write(i);
}

> 01234

// 2번 예제
function a (){
    i = 0;
}
for(i = 0; i < 5; i++){
    a();
    document.write(i);
}

> 에러. 무한반복

1번 예제에서는 함수에 선언된 i(지역변수)와 for문에서 선언된 i(전역변수)가 서로 유효범위가 달라서 영향을 주지 않아 for문의 정상적인 값인 01234를 출력하게 되지만, 2번 예제에서는 함수에서 선언된 i가 var로 선언되지 않아 지역변수가 아니라 전역변수로 작용되어 for문에서 i의 값은 영원히 0으로 재 정의되어 for문이 끝나지 않는 무한반복이된다.

전역 함수를 사용하고 싶을때는 

var MYAPP = {};
MYAPP.calculator = {
    'left' : null,
    'right' : null
}
MYAPP.coordinate = {
    'left' : null,
    'right' : null
}
 
MYAPP.calculator.left = 10;
MYAPP.calculator.right = 20;
function sum(){
    return MYAPP.calculator.left + MYAPP.calculator.right;
}
document.write(sum());

젼역변수를 하나만 생성하고 그 안에 필요에따라 사용해야될 전역변수들을 넣는 방법을 사용한다. (하나의 객체를 전역변수로 만들고 객체의 속성으로 변수를 관리하는 방법)

(function(){
    var MYAPP = {}
    MYAPP.calculator = {
        'left' : null,
        'right' : null
    }
    MYAPP.coordinate = {
        'left' : null,
        'right' : null
    }
    MYAPP.calculator.left = 10;
    MYAPP.calculator.right = 20;
    function sum(){
        return MYAPP.calculator.left + MYAPP.calculator.right;
    }
    document.write(sum());
}());

그 마저도 전역변수를 사용하기 싫다면 전체를 익명함수로 만들어 바로 호출하여 사용할 수 있다.

자바스크립트는 함수내에서만 지역변수를 선언할 수 있다. 이러한 것을 정적 유효범위(static scoping), 렉시컬 유효범위(lexical scoping)이라한다.

var i = 5;
 
function a(){
    var i = 10;
    b();
}
 
function b(){
    document.write(i);
}
 
a();


> 5가 출력된다.

함수가 정의된 시점의 전역변수가 사용된다. 위 예제와 같은 경우 함수 a뿐만 아니라 함수 c, 함수 d가 있다고 가정하고 변수 i를 정의하고 함수 b를 호출했을때 그때마다 b의 값이 바뀌어 버리면 동적으로 되어버린다. 하지만 그렇지 않고 함수가 정의 될때 선언된 변수가 그 함수내에 없다면 함수 밖에서 전역함수를 찾게되어 값을 사용하게 된다. 그렇기 때문에 정적 유효범위라고 하는것이다.