[모던 자바스크립트 딥다이브]_전역 변수의 문제점 어디까지 보고 오셨어요?

변수의 생명 주기

변수는 이전에 배운 스코프에 따라 생명주기가 결정됩니다.

만약 전역스코프에서 선언되었다면 코드가 끝날 때까지가 생명주기이겠고,

지역스코프에서 선언되었다면 코드블록이 끝날 때까지가 생명주기입니다.

var x = 'global';  //  -----------
                   //             |
function goo() {   //   ----|     |         
    var x = 'local';// 지역스코프  |
    consol.log(x);  //     |      |
    return x;       // ----|      |
}                  //             |
                  //         전역스코프
foo();            //              |               
console.log(x);   // -------------

 

전역 변수의 문제점

• 암묵적 결합
  전역변수는 코드 전체에서 사용하기 위해 선언을 하게 되는데 그렇게 하다보니 지역변수 속에서
  의도치 않게 값이 변경될 수도 있습니다.
• 긴 생명주기
  전역변수는 코드가 끝나지 않는한 생명이 계속 이어집니다.
  즉 메모리에 자리를 차지하고 있다는 것입니다.
  사용하지도 않을 값을 계속 메모리에 할당하고 있는것은 메모리 비효율적인 것이겠죠?
• 스코프 체인 상에서 종점에 존재
  이전에 배웠던 스코프 체인의 관점에서 본다면
  전역변수는 가장 바깥쪽에서 선언되었으므로 안쪽에서부터 점점 코드블록을 벗어나면서
  값을 찾아나선다면 제일 오래걸려 찾게 됩니다.
• 네임스페이스 오염
  파일이 분리되어 있다 하더라도 전역변수가 선언되면 그 전역스코프가 공유된다는 것입니다.
  따라서 다른 파일 내에서 동일한 이름으로 명명된 전역 변수나 전역 함수와 같은 스코프 내에 존재할 경우 예상치 못한 결과가 발생할 수 있습니다.

 

전역 변수의 사용을 억제하는 방법

• 즉시실행함수

(function () {
    var foo = 10;
}());

이렇게 함수의 끝에 괄호를 붙여주고 그 바깥을 괄호로 한번 감싸게 되면 즉시실행함수를 만들 수 있습니다.

모든 코드를 즉시 실행함수로 감싸면 모든 변수는 즉시 실행 함수의 변수가 됩니다.

• 네임스페이스 객체

var NAMESPACE = {};

NAMESPACE.name = {
    first : 'kim',
    last : 'munsoon'
}

네임스페이스 객체에 또 다른 네임스페이스 객체를 프로퍼티로 추가하여 네임스페이스를 계층적으로 구성해 사용할 수도 있습니다.

• 모듈패턴

var Counter = (function () {
  var num = 0;
  return {
    increase() {
      return ++num;
    },
    decrease() {
      return --num;
    }
  };
};

모듈패턴은 클래스를 모방해서 관련이 있는 변수와 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈을 만듭니다.

모듈 패턴은 전역 변수의 억제는 물론 캡슐화까지 구현합니다.

갭슐화는 객체의 특정 프로퍼티나 메서드를 감출 목적을 사용하기도 합니다. 이를 정보은닉이라고 합니다.