JavaScript 전역 변수의 문제점과 전역 변수 사용 줄이기

전역 변수의 문제점?

✔️ 암묵적 결합

모든 코드가 전역 변수를 참조하고 변경할 수 있게 된다.

변수의 유효 범위가 크기 때문에 코드의 가독성은 나빠지고 의도하지 않은 상태 변경이 발생할 수 있는 위험이 높아진다.

 

✔️ 긴 생명 주기

전역 변수는 생명 주기가 길다.

메모리 리소스가 오랜 기간 소비된다. 전역 변수의 상태를 변경할 수 있는 시간과 기회가 많다.

 

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

전역 변수는 스코프 체인 상에서 종점에 존재한다.

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

 

✔️ 네임스페이스 오염

자바스크립트의 가장 큰 문제점 중 하나는 파일이 분리되어 있어도 하나의 전역 스코프를 공유한다는 것이다.

전역 변수의 사용을 줄이는 방법?

✔️ 즉시 실행 함수

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

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

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

이 방법을 사용하면 전역 변수를 생성하지 않으므로 라이브러리 등에 자주 사용된다.

 

✔️ 네임스페이스 객체

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

 

✔️ 모듈 패턴

전역 변수의 억제는 물론 캡슐화까지 구현 가능

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

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

// private 변수는 외부로 노출되지 않는다.
console.log(Counter.num); // undefined

console.log(Counter.increase()); // 1
console.log(Counter.increase()); // 2
console.log(Coutner.decrease()); // 1
console.log(Counter.decrease()); // 0

 

✔️ ES6 모듈

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

.mjs 확장자를 권장한다.