[함수지향] 유효범위 - 전역변수, 지역변수

생활코딩 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743)

---

 유효 범위 ( Scope ) 

유효 범위는 변수에 수명을 의미한다.

 

예제를 통해서 자세하게 알아보자.

var vscope = 'global';
function fscope(){
    alert(vscope);
}
fscope();

위 코드의 실행 결과는 global이 출력된다.

 

만약, fscope함수 안에 vscope가 하나 더 선언된다면 어떤 값을 출력할까?

var vscope = 'global';
function fscope(){
 	var vscope = 'local';
    	alert("안 : " + vscope);		//local
}
alert("밖 : " + vscope);				//global
fscope();

실행 결과는 안 : local이 출력되고, 밖 : global이 출력된다.

 

즉 함수 안에서 변수 vscope을 출력했을 때, 함수 내에서 선언한 지역변수 vscope의 값인 local이 사용되었다.

하지만 함수 밖에서 vscope를 호출 했을 때는 전역변수 vscope의 값인 global이 사용된 것이다.

 

따라서 지역변수의 유효범위는 함수 안이고, 전역변수의 유효범위는 애플리케이션 전역인데, 같은 이름의 지역변수와 전역변수가 동시에 정의되어 있다면 지역변수가 우선한다는 것을 알 수 있다.

 

아래 예제와 같은 경우는 결과가 모두 local이다.

var vscope = 'global';
function fscope(){
    vscope = 'local';
    alert('안 : '+vscope);	//local이 출력된다.
}
fscope();
alert('밖 : '+vscope);		//local이 출력된다.

왜냐하면, 함수 fscope의 지역변수를 선언할 때 var를 사용하지 않았기 때문이다.

var를 사용하지 않은 지역변수는 전역변수가 되기 때문에 결과는 local이 출력된다.

 

웬만하면, 전역 변수보다 지역변수 사용하는 것을 추천한다.

소스코드가 결합되는 과정에서 변수의 이름이 겹치면 의도와 다르게 실행될 수 있기 때문이다.

따라서, 해당 지역 안에서만 사용하도록 하는 지역변수 사용을 추천한다.

---

 유효범위의 효용 

먼저, 예제를 통해서 알아보자.

function a (){
    var i = 0;
}
for(var i = 0; i < 5; i++){
    a();
    document.write(i);
}

실행결과는 0 1 2 3 4 가 출력된다.

여기까지는 정상적인 출력문의 소스코드라면, 아래와 같이 함수 a안에 있는 i에 var를 작성하지 않으면 어떻게 될까?

function a (){
    i = 0;
}
for(var i = 0; i < 5; i++){
    a();
    document.write(i);
}

위 결과는 변수 i는 전역변수가 되어서, 반복문의 i 값이 0으로 반복해서 초기화된다.

결과적으로 브라우저는 무한루프로 다운되게 된다.

 

만약 이러한 문제점이 있는데 코드가 길다면, 에러가 발생하지 않아 문제점을 찾기 어렵다.

 

두 개의 예제는 변수 i가 지역변수 일 때와 전역변수 일 때의 차이점을 나타낸 것이다.

따라서, 전역변수는 각기 다른 로직에서 사용하는 같은 이름의 변수값을 변경시켜서 의도하지 않는 문제가 발생할 수 있으므로 지역변수 사용을 추천한다.

---

 전역변수 사용 

전역변수를 사용하지 않으면 좋지만, 불가피하게 사용해야 하는 경우는 하나의 객체를 전역변수로 만들고 객체의 속성으로 변수를 관리하는 방법을 사용한다.

 

아래 코드는 위 방법에 대한 소스코드이다.

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

---

 유효 범위의 대상 ( 함수 ) 

자바스크립트는 함수에 대한 유효범위만 제공한다.

 

예제를 통해서 알아보자.

for(var i = 0; i < 1; i++){
    var name = 'coding everybody';
}
alert(name);

위 코드와 같이, for문 안에 작성하였는데 name은 지역변수가 아니다.

보통 java와 같은 언어는 지역변수로 인식하여서 에러가 발생한다.

 

하지만, 자바스크립트는 함수 안에서 선언한 것만 지역변수로 인식하기 때문에 위 예제에서 name은 전역변수이다.

---

 정적 유효범위 

자바스크립트는 함수가 선언된 시점에서의 유효범위를 갖는다.

이러한 유효범위의 방식을 정적 유효범위(static scoping), 혹은 렉시컬(lexical scoping)이라고 한다. 

 

아래 예제를 통해서 알아보자.

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

위 코드에서 실행 결과값은 뭐가 나올까?

 

즉, b함수의 i는 5가 들어갈까? 10이 들어갈까? 이다.

결과 값은 5가 출력된다.

 

자바스크립트는 b함수가 호출이 아닌 선언된 시점에서 유효범위를 갖기 때문에, 전역변수인 i의 값을 출력한다.