[Deepdive] 14장 전역변수의 문제점

전역변수

전역변수를 선언한 의도는 코드 어디서든 참조하고 할당할수있는 변수로 사용하겠다는 의미인데 이는 모든코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합을 허용하는것이다. 즉 해당 코드가 끝날때까지 생명주기가 이어진다.

또한 스코프 체인상 가장 종점에 위치해있기때문에 검색속도가 가장 느리다. (물론 차이는 그렇게 크진않다)

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

즉시 실행 함수

함수 정의와 동시에 호출되는 즉시실행함수는 한번만 호출된다. 이런특성을 이용해 전역변수의 사용을 제한하는 방법이다.

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

네임스페이스 객체

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

ver MYAPP = {} // 전역 스페이스 객체 

MYAPP.person = {
  name: "Lee",
  address: "Seoul",
};
// 네임 스페이스 객체에 또 객체를 프로퍼티로 
// 추가해서 계층적으로 구성할수도있다
console.log(MYAPP.person.name); // lee

모듈패턴

모듈패턴은 클래스를 모방해서 관련된변수와 함수를 모아 즉시실행함수로 감싸 하나의 모듈을 만드는것인데 자바스크립트의 강력한 기능인 클로저 기능을 동반한다.

해당 모듈화의 특징으로는 캡슐화 까지 구현할수있다.

캡슐화 는 객체의 특정 프로퍼티와 메서드를 감출목적으로 하나로 묶는것을말하며 해당 프로퍼티와 메서드를 감출목적으로 사용하기도한다 . 이를 정보 은닉이라 한다.

대부분의 객체지향 프로그래밍 언어는 클래스를 구성하는데 public, private, protected 등 접근 제한자를 두어 공개범위를 한정할수있는데 자바스크립트는 해당 접근 제한자 를 제공하지않아 모듈패턴을 통해 한정적이지만 정보은닉을 구현하기 위해사용한다.

var Counter = (function () {
  var num = 0;

  return {
    incresase() {
      return ++num;
    },
    decrease() {
      return --num;
    }
  };
});
// private 변수는 외부로노출이 되지않음
console.log(Counter.num) // undefined

console.log(Counter.incresase()) // 1
console.log(Counter.incresase()) // 2
console.log(Counter.decrease()) // 1
console.log(Counter.decrease()) // 0

// 모듈화한 메소드를 통해서 Counter 안에 변수를 조작할수있다.

ES6 모듈

ES6 모듈은 파일 자체의 독자적인 모듈 스코프를 제공하는데 해당 모듈파일에서는 var 키워드로 선언한 변수는 더이상 전역변수가 아니며 window 객체 프로퍼티도 아니다.

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

확장자는 mjs 를 권장하고 스크립트 타입에 module 어리티뷰트를 추가하면 해당 파일은 모듈로써 동작하게된다.