전역 변수의 문제점

전역 변수의 무분별한 사용은 위험하다.
전역 변수를 반드시 사용해야할 이유가 없다면 지역 변수를 사용해야한다.

변수의 생명 주기

---

지역 변수의 생명 주기

• 함수의 생명 주기와 일치
• 함수가 종료되어도 누군가 스코프를 참조하고 있다면 스코프는 해제되지 않고 생존함
  
  

전역 변수의 생명 주기

• var 로 선언한 전역 변수 => 전역 객체의 생명 주기와 일치

전역 객체
런타임 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체

• 클라이언트 사이드 환경 (브라우저) - window
• 서버 사이드 환경 (Node.js) - global

전역 변수의 문제점

---

• 모든 코드가 전역 변수를 참조/변경 가능 => 의도치 않은 상태 변경의 위험성
• 긴 생명 주기 => 메모리 리소스를 오래 소비함
• 스코프 체인 상 종점에 존재 => 가장 마지막에 검색되므로 검색 속도가 가장 느림

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

---

즉시 실행 함수

• 함수 정의와 동시에 단 한 번만 호출됨
• 모든 변수가 즉시 실행 함수의 지역 변수가 됨

(function() {
  var foo = 10; // 즉시 실행 함수의 지역 변수가 됨
  ...
}());
  
console.log(foo); // ReferenceError: foo is not defined

네임스페이스 객체

• 전역에 네임스페이스 역할 담당할 객체를 생성
• 전역 변수처럼 사용할 변수를 프로퍼티로 추가
• 식별자 충돌 방지 효과는 있으나 객체 자체가 전역 변수에 할당됨

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

MYAPP.name = 'Lee'; // 객체의 프로퍼티로 추가

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

모듈 패턴

• 관련 변수, 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈을 생성
• 클로저를 기반으로 동작
• 전역 변수의 억제
• 캡슐화 구현 => 객체의 프로퍼티와 메소드를 하나로 묶음 (정보 은닉)

var Counter = (function() {
  // private 변수
  var num = 0;
  
  // 외부에 공개할 변수나 함수를 담아 반환
  return {
    increase() {
      return ++num;
    },
    decrease() {
      return --num;
    }
  };
}());

// private 변수는 외부로 노출 X
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

ES6 모듈

• 파일 자체의 독자적인 모듈 스코프를 제공
• 모던 브라우저에서 사용 가능 ( 구형 브라우저에서 동작X )
• script 태그에 type="module" 어트리뷰트 추가

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