14장 전역 변수의 문제점

14.1 변수의 생명 주기

14.1.1 지역 변수의 생명 주기(14-01)

• 지역 변수의 생명 주기는 함수의 생명 주기와 일치

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

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

14-02

• 1의 정답은? undefiend

var x = 'global';

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

foo();
console.log(x); // global

14.1.2 전역 변수의 생명 주기

• var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 됨

• 전역 변수의 생명 주기가 전역 객체의 생명 주기와 일치한다는 것을 말함

14.2 전역 변수의 문제점(14-03)

• 전역 변수의 문제점 암묵적 결합(어디서든) 긴 생명 주기(아래 예시) 스코프 체인 상에서 종점에 존재(종점이라 검색이 느림) 네임스페이스 오염(파일이 분리되어도 하나의 전역 스코프를 공유)

var x = 1;

// ...

// 변수의 중복 선언. 기존 변수에 값을 재할당한다.
var x = 100;
console.log(x); // 100

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

14.3.1 즉시 실행 함수(14-04)

• 전역 변수 사용 억제 방법 즉시 실행 함수(단 한번만 호출)

(function () {
  var foo = 10; // 즉시 실행 함수의 지역 변수
  // ...
}());

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

14.3.2 네임스페이스 객체(14-05)

• 전역 변수 사용 억제 방법 네임스페이스 객체(추천 x)

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

MYAPP.name = 'Lee';

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

14-06

• 이름 충돌은 방지 하겠지만 객체 자체는 전역 변수에 할당

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

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

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

14.3.3 모듈 패턴(14-07)

• 전역 변수 사용 억제 방법 모듈 패턴(클로저 기반, 캡슐화!)

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

  // public 외부로 공개할 데이터나 메서드를 프로퍼티로 추가한 객체를 반환한다.
  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 모듈(14-08)

• 전역 변수 사용 억제 방법 ES6 모듈(확장자 mjs를 권장)

• 이를 사용하면 전역 변수 사용 못함. ES6 모듈은 파일 자체의 독자적인 모듈 스코프를 제공(원래 1개의 스코프를 사용했음!!)

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