14장 전역변수의 문제점

14.1 변수의 생명주기

14.1.1 지역변수의 생명주기

전역변수의 생명주기는 애플리케이션의 생명주기와 같다.

하지만 함수내부에서 선언된 지역변수는 함수가 호출되면 생성되고 종료하면 소멸한다.

console.log(x); // referenceError

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

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

 

변수선언은 코드가 한줄씩 순차적으로 실행되기전에 런타임이전단계에서 자바스크립트 엔진에 의해 먼저실행된다고 앞장에서 다뤘었다.

하지만 지역변수 x는 함수호출전에는 생성되지않는다. 함수가 호출된후 그다음 자바스크립트 엔진이 호이스팅을 실행하게된다.

 

필자는 지연변수도 처음에 호이스팅이일어나서 최상위 console.log(x)도 var키워드사용시 undefined가 날줄알았는데 함수안에서는 호출수에 호이스팅이 일어난다는 사실을 다시한번 알게되었다.

 

변수는 스코프가 소멸될때까지 유효한다고 한다. 즉 스코프가 유효할때까지는 변수는 소멸되지않고 유효하다.

14.1.2 전역변수의 생명주기

브라우저 환경에서 전역객체는 window이므로 브라우저환경에서 var 키워드로 선언한 전역변수는

전역객체 window의 프로퍼티다.

var 키워드로 선언한 전역 변수는 웹페이지를 닫을때까지 유효하다.

 

14.2 전역 변수의 문제점

1. 긴생명주기

 

전역변수는 생명주기가 길다. 또한 전역변수의 상태를 변경할 확률도 많아진다.

var 키워드는 변수의 중복선언을 허용하므로 변수이름이 중복되어 재할당이 이뤄질수있는 가능성도있다.

var x = 1;

var x = 100;
console.log(x); // 100

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

전역변수는 스코프 체인상에서 종점에 존재한다. 변수를 검색할때 전역변수가 가장 마지막에 검색된다는것이다.

즉 전역변수의 검색 속도가 가장 느리다.

3. 네임스페이스 오염

파일이 분리되어도 전역변수나 전역함수가 같은 스코프내에 존재할경우 예상치 못한 결과를 가져올수있다.

 

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

14.3.1 즉시실행함수

함수정의와 동시에 호출되는 즉시실행함수는 단한번만 호출된다.

즉시실행함수의 안은 지역변수가 된다. 이러한 특성을이용해 전역변수의 사용을 제한하는 방법이다.

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

console.log(foo); ReferneceError

라이브러리 등에 자주 사용된다.

14.3.2 네임스페이스 객체

전역에 네임스페이스 역활을 담당할 객체를 생성하고 프로퍼티로 추가하는 방법이다.

var MYAPP = {}; //전역 네임스페이스 객체
MYAPP.name = "Lee";

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

하지만 네임스페이스객체자체가 결국엔 전역 변수에 할당되므로 유용해보이지 않는다.

14.3.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

외부에 노출하고 싶은 변수나 함수를 담아 반환한다.

퍼블릭멤버(외부노출) 프라이빗멤버(외부노출x) 으로 정보 은닉을한다.

14.3.4 ES6모듈

ES6 모듈을 사용하면 더는 전역변수를 사용할수없다.

ES모듈은 파일 자체의 독자적인 모듈 스코프를 제공한다

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