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

14.1 변수의 생명 주기

- 지역 변수의 생명주기

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

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

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

• 호이스팅은 스코프 단위로 동작

var x = 'global';

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

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

- 전역 변수의 생명주기

전역변수의 생명 주기는 전역 객체의 생명 주기와 일치

---

14.2 전역 변수의 문제점

1. 암묵적 결합

모든 코드가 전역 변수를 참조하고 변경할 수 있음

• 전역 변수를 선언한 의도는 암묵적 결합을 허용

• 변수의 스코프가 커지면?
  코드의 가독성을 나빠지고, 의도치 않은 상태 변경이 일어날 수 있음

2. 긴 생명 주기

• 전역 변수는 생명 주기가 김

• 생명주기가 긴 전역 변수의 단점

  • 메모리 리소스가 오랜 기간 소비됨
  • 변수 이름이 중복될 가능성이 있어, 의도치 않은 재할당이 일어날 수 있음

3. 스코프 체인 상에서 종점에 존재

• 전역 변수는 스코프 체인 상에서 종점에 존재

• 즉, 전역 변수의 검색 속도가 가장 느림

4. 네임 스페이스 오염

• 자바스크립트는 파일이 분리되어 있어도 하나의 전역 스코프를 공유

• 다른 파일 내에서 동일한 이름이로 명명된 전역 변수나 전역 함수가 같은 스코프 내에 존재할 경우 예상치 못한 결과가 발생할 수 있음

---

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

변수의 스코프는 좁을수록 좋으므로,
전역 변수를 반드시 사용해야 할 이유가 없다면 지역 변수 사용

• 전역 변수의 사용을 억제하는 방법
  • 즉시 실행 함수
  • 네임스페이스 객체
  • 모듈 패턴
  • ES6 모듈

1. 즉시 실행 함수

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

// 즉시 실행 함수
(function() {
  var foo = 10;
}());

console.log(foo);	// ReferenceError

2. 네임스페이스 객체

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

var MYAPP = {};

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

var MYAPP = {};

MYAPP.person = {
  name: 'Lee';
  address: 'Seoul'; 
};
console.log(MYAPP.person.name);	 // Lee

3. 모듈 패턴

• 클래스를 모방해서 관련이 있는 변수와 함수를 모아 직시 실행 함수로 감싸 하나의 모듈을 만듦

var Counter = (function () {
  var num = 0;
  
  return {
    increase() {
      return ++num;
    },
    decrease() {
      return --num;
    }
  };
}());

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

4. ES6 모듈

• ES6 모듈은 파일 자체의 독자적인 모듈 스코프 제공

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