전역 변수의 무분별한 사용은 위험하다.

14.1 변수의 생명 주기

14.1.1 지역 변수의 생명 주기

변수는 선언에 의해 생성되고 할당을 통해 값을 갖으며, 언젠가는 소멸되는 생명 주기를 갖고 있다.

변수의 생명 주기는 메모리 공간이 확보 (Allocate)된 시점부터 메모리 공간이 해제 (Release) 되어 가용 메모리 풀 (Memory Pool)에 반환되는 시점까지를 의미.

지역 변수의 생명 주기는 함수의 생명 주기와 같다.

function foo() {
  var x = 'local';
  console.log(x); // local
  return x;
}

foo();
console.log(x); // ReferenceError: x is not defined

14.1.2 전역 변수의 생명 주기

전역 변수는 코드가 로드 되자마자 곧바로 해석되고 실행된다.

전체 코드의 마지막 문이 실행될 때 까지 메모리 상에 남아있게 된다.

var 키워드로 선언한 저역 변수의 생명 주기는 전역 객체의 생명 주기와 일치한다.

14.2 전역 변수의 문제점

암묵적 결합

모든 코드가 전역 변수를 참조 및 변경이 가능하다.

긴 생명 주기

생명 주기가 길기 때문에 메모리 리소르를 오래 소비한다.

스코프 체인 상에서 종점에 존재

스코프 체인 상에서 최상단 종점에 위치하기 때문에 변수 검색 속도가 제일 느리다.

네임스페이스 오염

다른 파일 내에서 같은 이름의 전역 변수가 있을 때, 같이 사용될 경우 예상치 못한 에러가 발생할 수 있다.

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

14.3.1 즉시 실행 함수

모든 코드를 즉시 실행 함수로 바꾸면 모든 변수는 즉시 실행 함수의 지역 변수가 된다.

14.3.2 네임스페이스 객체

네임스페이스 객체를 사용하여 네임스페이스를 분리하는 방법.

식별자 충돌은 방지할 수 있겠지만 네임스페이스 객체 자체가 전역 변수에 할당되므로 그다지 유용한 방법은 아니다.

var MYAPP = {}; // 전역 네임스페이스 객체

MYAPP.person = {
  name: 'Lee',
  address: 'Seoul'
};

console.log(MYAPP.person.name); // Lee

14.3.3 모듈 패턴

관련 있는 변수와 함수를 모아 즉시 실행 함수로 감싸서 하나의 모듈로 만드는 방식.

전역 변수 억제 + 캡슐화까지 챙길 수 있는 유용한 패턴.

var Counter = (function () {
  // private 변수
  var num = 0;

  // 외부로 공개할 데이터나 메서드를 프로퍼티로 추가한 객체를 반환한다.
  return {
    increase() {
      return ++num;
    },
    decrease() {
      return --num;
    }
  };
}());

// private 변수는 외부로 노출되지 않는다.
console.log(Counter.num); // undefined

console.log(Counter.increase()); // 1
console.log(Counter.increase()); // 2
console.log(Counter.decrease()); // 1
console.log(Counter.decrease()); // 0

14.3.4 ES6 모듈

ES6 모듈부터는 전역 변수를 사용할 수 없다.

파일 자체의 독립적인 모듈 스코프를 제공하기 때문.

script 태그에 type=’module’ 을 추가하여 실행할 수 있다.

확장자는 mjs를 권장.

<script type="module" src="lib.mjs"></script>
<script type="module" src="app.mjs"></script>