[JavaScript] 유효범위

1. 전역변수와 지역변수

- 함수 밖에서 변수를 선언하면 그 변수는 전역변수가 된다. 전역변수는 애플리케이션 전역에서 접근이 가능한 변수다. 다시 말해서 어떤 함수 안에서도 그 변수에 접근 할 수 있다. 지역변수의 유효범위는 함수 안이고, 전역변수의 유효범위는 애플리케이션 전역인데, 같은 이름의 지역변수와 전역변수가 동시에 정의되어 있다면 지역변수가 우선한다는 것을 알 수 있다. 

var vsscope = 'global';  //전역변수
function fsscope() {
   var vsscope = 'local';   //지역변수
   alert('함수안 ' + vsscope);
}
fsscope(); //함수안 local
alert('함수밖 ' + vsscope); //함수밖 global

var vsscope = 'global';
function fsscope() {
   var vsscope = 'local';
   var lv = 'local variables';
   alert(lv);
}
fsscope(); //local variables
alert(lv); //lv는 지역변수이므로 경고창 안뜸

- var 쓰는 것과 쓰지않는 것의 차이

: var를 사용하지 않은 지역변수는 전역변수가 된다.

var vsscope = 'global';
function fsscope() {
   var vsscope = 'local';
}
fsscope(); 
alert(vsscope); //global

var vsscope = 'global';
function fsscope() {
   vsscope = 'local';
}
fsscope();
alert(vsscope); //local

var vsscope = 'global';
function fsscope() {
   var vsscope = 'local';
   vsscope = 'local';   //이미 지역변수가 만들어있다면 전역변수가 아닌 지역변수로 할당함.
}
fsscope();
alert(vsscope); //global

전역변수는 사용하지 않는 것이 좋다. 여러가지 이유로 그 값이 변경될 수 있기 때문이다. 함수 안에서 전역변수를 사용하고 있는데, 누군가에 의해서 전역변수의 값이 달라졌다면 어떻게 될까? 함수의 동작도 달라지게 된다. 이것은 버그의 원인이 된다. 또한 함수를 다른 에플리케이션에 이식하는데도 어려움을 초래한다. 함수의 핵심은 로직의 재활용이라는 점을 상기하자. 변수를 선언할 때는 꼭 var을 붙이는 것을 습관화해야 한다. 전역변수를 사용해야 하는 경우라면 그것을 사용하는 이유를 명확히 알고 있을 때 사용하도록 하자.

 

2. 유효범위의 효용

- 변수 i를 지역변수로 사용했을 때와 전역변수로 사용했을 때의 차이점

 

- 지역변수의 사용

function a() {
   var i = 0; 
}
for(var i = 0; i < 5; i++) { //변수 i 전역변수
   a();
   document.write(i); //01234
}

- 전역변수의 사용

function a() {
   i = 0; 
}
for(var i = 0; i < 5; i++) { //변수 i 전역변수
   a();
   document.write(i);
}

: 전역변수는 각기 다른 로직에서 사용하는 같은 이름의 변수값을 변경시켜서 의도하지 않은 문제를 발생시킨다. 

 

3. 전역변수의 사용

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

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

 

4. 유효범위의 대상(함수)

- 자바스크립트는 함수에 대한 유효범위만을 제공한다. 많은 언어들이 블록(대체로 {,})에 대한 유효범위를 제공하는 것과 다른 점이다.

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

- 자바에서는 아래의 코드는 허용되지 않는다. name은 지역변수로 for문 안에서 선언 되었는데 이를 for문 밖에서 호출하고 있기 때문이다. 

for(int i = 0; i < 10; i++){
    String name = "egoing";
}
System.out.println(name);

 

5. 정적 유효범위

- 자바스크립트는 함수가 선언된 시점에서의 유효범위를 갖는다. 이러한 유효범위의 방식을 정적 유효범위(static scoping), 혹은 렉시컬(lexical scoping)이라고 한다.

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