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

14-1장. 변수의 생명 주기

• 전역 변수의 무분별한 사용은 위험함 ⇒ 전역 변수를 반드시 사용해야 할 이유가 있는 게 아니라면 지역 변수를 사용해야 함

 

지역 변수의 생명 주기

• 변수는 생성되고 소멸되는 생성 주기가 있음
• 전역 변수의 생명 주기 : 어플리케이션의 생명 주기와 같음
• 함수 내부에서 선언된 지역 변수의 생명 주기 : 함수가 호출되면 생성되고 함수가 종료하면 소멸됨

 

• 변수의 선언은 코드가 한 줄씩 순차적으로 실행되는 시점인 런타임에 실행되는 것 X, 런타임 이전 단계에서 자바스크립트 엔진에 의해 먼저 실행 O
• 함수 내부에서 선언한 변수 ⇒ 함수가 호출된 직후에 함수 몸체의 코드가 한 줄씩 순차적으로 실행되기 이전에 자바스크립트 엔진에 의해 먼저 실행됨
• 함수 내부에서 선언된 지역 변수
  • ⇒ 함수가 호출되어 실행되는 동안에만 유효
  • ⇒ 대부분은 함수의 생명 주기와 일치
• 지역 변수가 함수보다 오래 생존하는 경우도 있음
  • 지역 변수는 함수가 생성한 스코프에 등록됨
  • 변수는 자신이 등록된 스코프가 소멸될 때까지 유효한데, 누군가가 스코프를 참조하고 있다면 스코프는 해제되지 않고 생존함

 

❗변수란?

: 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 ⇒ 변수의 생명 주기는 메모리 공간이 확보된 시점부터 메모리 공간이 해제되어 가용 메모리 풀에 반환되는 시점까지

 

전역 변수의 생명 주기

• 전역 코드에는 반환문을 사용할 수 없으므로 마지막 문이 실행되어 더 이상 실행할 문이 없을 때 종료함
• 브라우저 환경에서의 전역 객체는 window이므로 브라우저 환경에서 var 키워드로 선언한 전역 변수는 전역 객체 window의 프로퍼티임
• 전역 객체 window는 웹페이지를 닫기 전까지 유효함
• var 키워드로 선언한 전역 변수의 생명 주기는 전역 객체의 생명 주기와 일치함

 

14-2장. 전역 변수의 문제점

1. 암묵적 결합

• 암묵적 결합 : 모든 코드가 전역 변수를 참조하고 변경 가능한 것
• 변수의 유효 범위가 크면 클수록 코드의 가독성 ↓, 의도치 않게 상태가 변경될 수 있는 위험성 ↑

 

2. 긴 생명 주기

• 전역 변수의 생명 주기는 긺
• ⇒ 메모리 리소스도 오랜 기간 소비됨
• 생명 주기가 긴 전역 변수는 변수 이름이 중복될 가능성 O ⇒ 의도치 않은 재할당 이루어질 수 있음

 

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

• 전역 변수는 스코프 체인 상에서 종점에 존재함 (변수를 검색할 때 전역 변수가 가장 마지막에 검색됨)
• ⇒ 전역 변수의 검색 속도가 가장 느림

 

4. 네임스페이스 오염

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

 

14-3. 전역 변수의 사용을 억제하는 방법

• 무분별한 전역 변수의 남발은 억제해야 함
• 전역 변수 사용을 억제할 수 있는 방법은 아래와 같음

 

1. 즉시 실행 함수

• 즉시 실행 함수는 함수의 정의와 동시에 호출되며, 단 1번만 호출됨
• 모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 됨
• 이 방법을 사용하면 전역 변수를 생성하지 않으므로 라이브러리 등에 자주 사용됨

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

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

 

2. 네임스페이스 객체

• 전역에 네임스페이스 역할을 담당할 객체를 생성하고, 전역 변수처럼 사용하고 싶은 변수를 해당 객체의 프로퍼티로 추가하는 방법
• 네임스페이스 객체에 또 다른 네임스페이스 객체를 프로퍼티로 추가하여 네임스페이스를 계층적으로 구성할 수 있음
• 식별자 충돌을 방지하는 효과는 있지만, 네임스페이스 객체 자체가 전역 변수에 할당되므로 그다지 유용하진 X

var MYAPP = {};

MYAPP.name = 'Lee';

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

// 아래와 같이 계층적으로 구성할 수도 있음
MYAPP.person = {
	name: 'Lee',
	address: 'Seoul'
};

console.log(MYAPP.person.name);  // Lee

 

3. 모듈 패턴

• 모듈 패턴은 클래스를 모방해서 관련이 있는 변수/함수를 모아 즉시 실행 함수로 감싸 하나의 모듈을 만듦
• 모듈 패턴은 클로저를 기반으로 동작함
• 모듈 패턴의 특징은 전역 변수의 억제와 함께 캡슐화까지 구현 가능하다는 것
• 모듈 패턴은 전역 네임스페이스의 오염을 막고, 한정적이기는 하지만 정보 은닉도 구현하기 위해 사용
• 외부에 노출하고 싶은 변수/함수를 담아 반환함 ⇒ 반환되는 객체의 프로퍼티는 외부에 노출되는 public 멤버
• 반환하는 객체에 추가되지 않은 변수/함수는 private 멤버가 됨

var Counter = (function() {
	var num = 0; // private 변수

	// 외부에 공개할 데이터나 메서드를 프로퍼티로 추가한 객체를 반환함
	return {
		increase() {
			return ++num;
		},
		decrease() {
			return --num;
		}
	};
}());

console.log(Counter.num);  // undefined => private 변수이므로 외부에 노출되지 않음
console.log(Counter.increase());  // 1
console.log(Counter.increase());  // 2
console.log(Counter.decrease());  // 1
console.log(Counter.decrease());  // 0

 

❗캡슐화란?

: 객체의 상태를 나타내는 프로퍼티와 메서드(프로퍼티를 참조하고 조작할 수 있는 동작)를 하나로 묶는 것

❗자바스크립트의 접근 제한자

: 자바스크립트는 public, private 등의 접근 제한자를 제공하지 X

 

ES6 모듈

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

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