14_GlobalVariable.md

14장 전역 변수의 문제점

전역 변수를 반드시 사용해야 할 이유가 없다면 지역 변수를 사용해야 한다. 전역 변수의 문제점과 전역 변수의 사용을 억제할 수 있는 방법을 살펴보자.

14.1 변수의 생명 주기

변수는 생성되고 소멸되는 생명 주기가 있다. 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다.

14.1.1 지역 변수의 생명 주기

함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료되면 소멸한다. 즉 지역 변수의 생명 주기는 함수의 생명주기와 일치한다.

호이스팅은 스코프 단위로 동작한다.

var x = 'global';

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

foo();
console.log(x); 

14.1.2 전역 변수의 생명 주기

전역 변수의 생명 주기가 전역 객체의 생명 주기와 일치한다.

14.2 전역 변수의 문제점

• 암묵적 결합
  • 코드 어디서든 참조하고 할당할 수 있는 변수이기 때문에 의도하지 않은 참조와 변경을 할 수 있다.
• 긴 생명 주기
  • 많은 메모리 리소스 소모
  • 상태 변경 가능성이 높다
• 스코프 체인 상에서 종점에 존재
  • 전역 변수의 검색 속도가 가장 느리다
• 네임스페이스 오염
  • 자바스크립트는 파일이 분리되어 있다 해도 하나의 전역 스코프를 공유
  • 이름이 같은 전역 변수나 전역 함수가 같은 스포크 내에 존재 할 가능성이 있다

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

전역 변수의 사용을 억제하여야 한다. 또한 변수의 스코프는 좁을 수록 좋다. 전역 변수의 사용을 억제할 수 있는 몇 가지 방법을 살펴보자.

14.3.1 즉시 실행 함수

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

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

console.log(foo);

14.3.2 네임스페이스 객체

전역에 네임스페이스 역할을 담당할 객체를 생성하고 전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가하는 방법이다.

var MYAPP = {};
MYAPP.name = 'Lee';

console.log(MYAPP.name);

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 모듈을 사용하면 더는 전역 변수를 사용할 수 없다. 파일 자체의 독자적인 모듈 스코프를 제공한다. 추후에 살펴본다.