변수의 생명 주기

• 지역 변수의 생명 주기는 함수의 생명 주기와 일치한다.
• 일반적으로 함수가 종료되면 함수가 생성한 스코프도 소멸한다. 그러나 누군가가 스코프를 참조하고 있다면 스코프는 해제되지 않고 생존하게 된다 → 클로저 개념과 연결
• 그러나 전역 변수는 전역 객체 (브라우저 환경에서 window)의 생명 주기와 일치한다.

전역 변수의 문제점

1. 긴 생명 주기
   • 메모리 리소스도 오랜 기간 소비
   • 변수 이름 중복 가능성
2. 암묵적 결합
   • 모든 코드가 전역 변수를 참조하고 변경할 수 있음
   • 유효 범위가 클수록 코드의 가독성 나빠지고, 의도치 않게 상태 변경 가능성
3. 스코프 체인 상에서 종점에 존재
   • 전역 변수의 검색 속도가 가장 느리다. (가장 나중에 검색)
4. 네임스페이스 오염
   • 자바스크립트는 파일이 분리되어도 전역 스코프가 하나
   • 따라서 여러 파일에서 동일한 이름으로 전역 변수, 전역 함수가 존재할 수 있는 위험

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

1. 즉시 실행 함수

   (function () {
   	var foo = 10;
   }());
   
   console.log(foo); // ReferenceError
   

2. 네임스페이스 객체

   • 전역에 네임스페이스 역할 객체를 생성하고, 전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가
   • 식별자 충돌을 방지할 수는 있으나 어차피 전역 변수라 유용하지 않음

   var MYAPP = {};
   
   MYAPP.name = 'leeeunji';
   MYAPP.person = {
   	name: 'leeeunji',
   	country: 'korea'
   }
   
   console.log(MYAPP.name); // leeeunji
   console.log(MYAPP.person.country); // korea
   

3. 모듈 패턴

   • 클로저 기반 동작

   var Counter = (function () {
   	var num = 0; // private 변수
   	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 모듈

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

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

   • 혹은 리액트에서 import 했던 것

   export default MyComponent;
   
   // 다른 파일에서
   import MyComponent from '/myComponent'