[딥다이브] 14장 전역변수의 문제점

14.1 변수의 생명주기

• 변수의 생명주기

  • 선언에 의해서 생성되고, 할당에 의해서 값을 갖는다. → 이후 소멸
  • 메모리 공간이 확보된 시점부터 메모리 공간이 해제(자신이 등록된 스코프가 소멸될 때 가비지 컬렉터에 의해 메모리 해제)되어 가용 메모리 풀에 반환되는 시점까지

• 변수는 자신이 선언된 위치에서 생성되고 소멸한다

  → 따라서 전역변수의 생명주기는 애플리케이션의 생명주기(=전역 객체의 생명주기)와 같고, 지역변수의 생명주기는 함수의 생명주기와 같다. (함수가 호출될 때 생성되고 종료될 때 소멸)

  → 따라서 변수는 함수가 호출되기 이전까지는 생성되지 않는다
  

• 그림 14-1
  

• 호이스팅 : 변수 선언이 스코프의 선두로 끌어올려진것 처럼 동작하는 자바스크립트의 특징, 스코프를 단위로 동작

• 그림 14-2
  

14.2 전역변수의 문제점

• 암묵적 결합: 모든 코드가 전역 변수를 참조하고 변경할 수 있는 결합, 코드 가독성이 나빠지고 의도치 않게 상태가 변경될 수 있다
• 긴 생명주기: 메모리 리소스 오래 소비, 중복 선언이 될 가능성이 있다 → 의도치 않은 재할당 발생
• 스코프 체인에서 종점(최상위)에 존재 → 검색 속도가 가장 느리다
• 네임스페이스 오염 → 다른 파일에서 선언된 전역변수와 이름이 같을경우 중복선언→재할당

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

• 변수의 스코프는 좁을 수록 좋다(예상치 못한 결과를 방지)

1. 즉시 실행 함수

   1. 모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역변수가 된다

2. 네임스페이스 객체

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

3. 모듈패턴

   1. 예제 14-7

   var Counter1 = (function(){
   var num = 10; 
   
   	return { 
   		increase(){
   			return ++num;
   		},
   		decrease(){
   			return --num;
   		}
       }
   }());
   Counter1.num //undefined
   Counter1.increase() //11
   
   var Counter2 = (function(){
   	return { 
   		num: 5, 
   		increase(){
   			return ++this.num;
   		}, 
   		decease(){
   			return --this.num;
   		}
   	}
   }());
   Counter2.num //5
   Counter2.increase() //6
   

   

4. 캡슐화 가능 → 객세의 상태를 나타내는 프로퍼티와 메서드를 묶을 수 있다(=캡슐화)는게 장점(cf. https://debugdaldal.tistory.com/150)

5. 정보은닉 가능→클로저

6. ES6모듈

   1. 파일 자체의 독자적인 모듈을 제공

   		  <script type="module" src="user.js"></script>
   		  <script type="module" src="hello.js"></script>

   cf. https://ko.javascript.info/modules-intro