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

변수의 생명 주기

---

지역 변수의 생명 주기

• 변수는 선언에 의해 생성되고 할당을 통해 값을 받으며, 언젠간 소멸함 ⇒ 변수는 생성되고 소멸되는 생명 주기 (life cycle)가 있음
  • 변수에 생명주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간 점유
• 전역 변수의 생명 주기 : 애플리케이션 생명 주기와 같음
  • 전역 변수 선언은 런타임 이전 단계에서 자바스크립트 엔진에 의해 먼저 실행
• 지역 변수 생명 주기 : 함수 호출 시 생성되고, 함수 종료 시 소멸
  • 지역 변수 선언은 함수 몸체 실행 이전에 자바스크립트 엔진에 의해 먼저 실행

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

• 대부분 지역 변수의 생명 주기는 함수 생명 주기와 일치하지만, 지역 변수가 더 오래 생존하는 경우도 있음
  • 변수의 생명 주기 : 메모리 공간이 확보된 시점부터 메모리 공간이 해제되어 가용 메모리 풀에 반환되는 시점까지 ⇒ 자신이 등록된 스코프가 소멸 (메모리 해제)될 때까지 유효
  ⇒ 누군가 메모리 공간 참조하고 있으면 해제되지 X
• var x = 'global'; function foo() { console.log(x); // undefined var x = 'local'; } foo(); console.log(x); // global
• 호이스팅은 스코프 단위로 동작
  • 전역 변수 호이스팅 : 전역 변수의 선언이 전역 스코프의 선두로 끌어 올려진 것처럼 동작
  • 지역 변수 호이스팅 : 지역 변수의 선언이 지역 스코프의 선두로 끌어 올려진 것처럼 동작
    • ⇒ 위 코드에서 foo 함수의 지역 변수 x는 선언된 시점에 undefined로 초기화되어 전역 변수를 참조한 것이 아닌 지역 변수를 참조해 값을 출력
  ⇒ **호이스팅** : **변수 선언이 스코프의 선두로** 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징

전역 변수의 생명 주기

• 전역 코드는 명시적인 호출 없이 실행 ⇒ 코드가 로드되자마자 곧바로 해석되고 실행
  • 전역 코드는 반환문을 사용할 수 없어 더 이상 실행할 문이 없을 때 종료
• 전역 변수의 생명 주기는 전역 객체의 생명 주기와 일치
  • ex. 브라우저 환경에서 전역 객체는 window ⇒ 브라우저 환경에서 var 키워드로 선언한 전역 변수는 웹페이지를 닫기 전까지 유효

전역 변수의 문제점

---

암묵적 결합

• 전역 변수를 선언한 의도 : 코드 어디서든 해당 변수를 참조하고 할당하겠다 ⇒ 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합 허용
• 변수의 유효 범위 (스코프)가 크면 클수록 코드의 가독성은 나빠지고 의도치 않은 상태 변경이 일어날 위험성이 높아짐

긴 생명 주기

• 전역 변수는 긴 생명 주기를 가지고 있음 ⇒ 메모리 리소스도 오랜 기간 소비
• 특히 var 키워드는 중복 선언을 허용 → 긴 생명 주기를 가진 전역 변수는 변수 이름이 중복될 가능성 있음 → 의도치 않은 재할당 이뤄짐

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

• 자바스크립트 엔진이 변수를 검색할 때 가장 마지막에 검색 ⇒ 전역 변수의 검색 속도가 가장 느림

네임스페이스 오염

• 자바스크립트의 가장 큰 문제 : 파일이 분리되어 있다 해도 하나의 **전역 스코프를 공유** ⇒ 다른 파일 내에서 동일한 이름으로 명명된 전역 변수나 전역 함수가 같은 스코프 내에 존재할 경우 예상치 못한 결과를 가져올 수 있음

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

---

• 전역 변수의 무분별한 사용은 위험 ⇒ 전역 변수를 반드시 사용해야 할 이유가 없다면 지역 변수 사용
• 변수의 스코프는 좁을수록 좋음

즉시 실행 함수

• 즉시 실행 함수 : 함수 정의와 동시에 호출되는 함수 (단 한 번만 호출됨)
• 모든 코드를 즉시 실행 함수로 감싸면, 모든 변수는 즉시 실행 함수의 지역 변수가 됨

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

console.log(foo); // ReferenceError

네임스페이스 객체

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

var MYAPP = {}; // 전역 네임스페이스 객체
MYAPP.name = 'Lee';
console.log(MYAPP.name); // Lee

• 네임스페이스 객체에 또 다른 네임스페이스 객체를 프로퍼티로 추가해서 네임스페이스를 계층적으로 구성 가능

var MYAPP = {}; // 전역 네임스페이스 객체
MYAPP.person = {
	name: 'Lee',
	address: 'Seoul'
}
console.log(MYAPP.person.name); // Lee

⇒ 네임스페이스를 분리해 식별자 충돌 방지 효과는 있음 but 네임스페이스 객체 자체가 전역 변수에 할당되므로 유용하지 X

모듈 패턴

• 클래스를 모방해 관련 변수와 함수를 모아 **즉시 실행 함수로 감싸** 하나의 모듈을 만듦
• 클로저를 기반으로 동작
• 전역 변수의 억제는 물론 캡슐화까지 구현 가능
  • 캡슐화 : 프로퍼티와 메서드 (객체 값이 함수인 경우)를 하나로 묶는 것 (= 정보 은닉)
  • 자바스크립트는 접근 제한자 (public, private, protected) 제공 X ⇒ 모듈 ㅐ턴을 통해 정보 은닉 구현하기도 함

  var Counter = (function() {
  	// private 변수
  	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
  

ES6 모듈

• ES6 모듈 사용하면 더는 전역 변수 사용할 수 X
  • 파일 자체의 독자적인 모듈 스코프 제공
    • ES6 모듈 내에서 var 키워드로 선언한 변수는 더 이상 전역 변수 X, window 객체의 프로퍼티 X
• script 태그에 type=’module’ 어트리뷰트 추가
  • 로드된 자바스크립트 파일은 모듈로서 동작 (확장자는 mjs)

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

• ES6 모듈은 IE를 포함한 구형 브라우저에서 동작 X, 브라우저의 ES6 모듈 기능 사용하더라도 트랜스파일링이나 번들링 필요 ⇒ Webpack 등의 모듈 번들러 사용하는 것이 일반적