모던 자바스크립트(ch14. 전역변수의 문제점)

지역 변수의 생명주기

• 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸

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

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

• 지역 변수의 생명 주기는 함수의 생명주기와 일치하기 때문에, 함수 외부에 있는 console.log(x)는 ReferenceError 발생함.
• 호이스팅은 스코프를 단위로 동작한다.
• 그래서 지역 변수는 함수 전체에서 유효하다. 단, 변수 할당문이 실행되기 이전까지는 undefined 값을 갖는다.

전역 변수의 생명주기

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

전역 변수의 문제점

• 암묵적 결함 : 유효범위가 클수록 가독성이 떨어지고, 상태가 변경될 위험성도 높아짐
• 긴 생명 주기 : 전역 변수는 생명 주기가 길다.
• 변수의 중복 선언을 허용하여 변수 이름이 중복될 가능성 있음
• 스코프 체인 상에서 종점에 존재 : 전역 변수의 검색 속도가 가장 느리다.
• 네임스페이스 오염 : 파일을 분리하더라도 하나의 전역 스코프 공유

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

즉시 실행 함수

• 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역변수가 됨.

네임스페이스 객체

• 전역 변수처럼 사용하고 싶은 변수를 프로퍼티 추가

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 변수는 외부로 노출되지 않는다. 
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 모듈 사용

출처 : 모던 자바스크립트 Deep Dive(P.200 ~ P.207)
저자 : 이웅모 지음, 위키북스