[자바스크립트 Deep Dive] 14. 전역변수의 문제점

14.1 변수의 생명 주기

14.1.1 지역변수의 생명 주기

지역변수는 함수 호출 시 생성되고 일반적으로 함수 종료 시 소멸됨
-> 지역변수의 생명 주기 === 함수의 생명 주기

cf) 누군가 스코프를 참조하고 있다면 함수가 종료돼도 스코프가 소멸되지 않음
-> 지역변수가 함수보다 오래 생존할 수도 있음

14.1.2. 전역변수의 생명 주기

• var 키워드로 선언한 전역변수의 생명 주기 === 전역 객체의 생명 주기

cf) var 키워드로 선언한 전역변수는 전역 객체의 프로퍼티임

var x = "global";

console.log(window.x); // 'global'

14.2 전역변수의 문제점

• 암묵적 결합: 어디서든 전역변수를 참조하고 변경할 수 있기 때문에, 코드의 가독성이 나빠지고 의도치 않게 상태가 변경될 수 있음
• 긴 생명 주기: 오랫 동안 메모리 리소스가 소비되고, 상태 변경에 의한 오류가 발생할 확률이 커짐
• 스코프 체인의 종점에 존재: 전역변수의 검색 속도가 가장 느림
• 네임스페이스 오염: JS는 파일이 분리되어 있어도 하나의 전역 스코프를 공유하기 때문에, 다른 파일 내에 동일한 이름의 전역변수나 전역함수가 존재할 경우 오류가 발생할 수 있음

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

변수의 스코프는 좁을수록 좋음

14.3.1 즉시 실행 함수

• 모든 변수는 즉시 실행 함수의 지역변수가 됨

(function () {
  const foo = 1;
})();

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

14.3.2 네임스페이스 객체

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

const MYAPP = {};

MYAPP.person = {
  name: "J",
  address: "Seoul",
};

14.3.3 모듈 패턴

• 관련 있는 변수와 함수를 즉시 실행 함수로 감싸 하나의 모듈을 만듦
• 캡슐화를 통해 정보 은닉 가능
  cf) 캡슐화: 프로퍼티와 메소드를 하나로 묶는 것

const Counter = (function () {
  // private member
  let num = 0;

  return {
    // public member
    increase() {
      return ++num;
    },
    decrease() {
      return --num;
    },
  };
})();

console.log(Counter.num); // undefined
console.log(Counter.increase()); // 1
console.log(Counter.decrease()); // 0

14.3.4. ES6 모듈

• 파일 자체의 독자적인 모듈 스코프를 제공 -> 전역변수를 사용할 수 없게 됨
  but 구형 브라우저에서 동작하지 않음

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