[JS] 전역 변수의 문제점

string_main·2022년 12월 5일

JavaScript 변수의 생명 주기 전역 변수의 문제점

JavaScript

목록 보기

12/22

🌱 변수의 생명 주기

정의 : 메모리 공간이 확보(allocate)된 시점부터 메모리 공간이 해제(release)되어 가용 메모리 풀에 반환되는 시점까지를 변수의 생명주기라고 한다.
필요성 : 변수에 생명주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유하게 된다.

🌿 지역 변수의 생명 주기

function foo() {
	var x = 'local'; // 지역 변수 X 생성 및 할당
	console.log(x); // local
	return x; // 지역 변수 X 소멸
}

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

지역 변수의 생명 주기는 함수의 생명 주기와 일치한다.

var x = 'global';

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

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

지역 변수는 함수 전체에서 유효하며, 호이스팅은 스코프 단위로 동작한다.

🌿 전역 변수의 생명 주기

var x = 'global'; // 전역 변수 x 생성 및 할당

function foo() {
	console.log(x);
	return x;
}

foo();
console.log(x); // 전역 변수 x 소멸

전역 변수는 진입점이 없어서 코드가 로드 되자마자 바로 해석되고 실행된다. var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 되고, 생명 주기는 전역 객체의 생명 주기와 일치한다.

✔️ 전역 객체란, 클라이언트 사이드(브라우저)에서는 window, 서버 사이드(Node.js)에서는 global 객체를 의미한다.

🌱 전역 변수의 문제점

암묵적 결합(implicit coupling) : 전역 변수는 코드 어디서든 참조하고 변경할 수 있다. 이는 암묵적 결합을 허용하는 것이다. 변수의 유효 범위가 크면 클수록 코드 가독성이 나빠지고 의도치 않게 상태가 변경될 위험성이 높아진다.
긴 생명 주기 : 전역 변수는 생명 주기가 길어 메모리 리소스도 오랜 기간 소비한다. 즉, 전역 변수의 상태를 변경할 수 있는 시간과 기회가 많아 오류가 발생할 확률이 높아진다.
스코프 체인 상에서 종점에 존재 : 전역 변수는 스코프 체인 상에서 종점에 위치하기 때문에 가장 마지막에 검색되어 검색 속도가 느리다.
네임스페이스 오염 : 자바스크립트는 파일이 분리되어 있어도 하나의 전역 스코프를 공유하는 문제점이 있어서 다른 파일 내 동일 이름으로 된 전역 변수나 함수가 같은 스코프 내에 존재할 경우 예상치 못한 결과가 생길 수 있다.

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

전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용해야 한다.
변수의 스코프는 좁을수록 좋다.

즉시 실행 함수 : 모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 된다.
```
(function () {
	var foo = 10;
	// ...
}());

console.log(foo); // ReferenceError: foo is not defined
```
네임스페이스 객체 : 전역에 네임스페이스 역할을 담당할 객체를 생성하고 전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가하는 방법이다. (식별자 충돌을 방지하는 효과는 있으나 네임스페이스 객체 자체가 전역 변수에 할당되므로 그다지 유용하진 않아 보인다.)
```
var MYAPP = {}; // 전역 네임스페이스 객체
MYAPP.name = "Lee";
console.log(MYAPP.name); // Lee
```

모듈 패턴 : 모듈 패턴은 클로저를 기반으로 동작하며 캡슐화를 구현할 수 있다.

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(Counter.decrease()); // 1
console.log(Counter.decrease()); // 0

자바스크립트는 접근 제한자를 제공하지 않아서 한정적이긴 하지만 정보 은닉을 구현하기 위해 사용된다.

✔️ 캡슐화란, 객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 동작인 메서드를 하나로 묶는 것을 말한다.

ES6 모듈 : ES6 모듈은 독자적인 모듈 스코프를 제공한다. 모듈 내에서 var 키워드로 선언한 변수는 더는 전역 변수가 아니다. script 태그에 type="module” 어트리뷰트를 추가하면 자바스크립트 파일은 모듈로서 동작한다.
```
<script type="module" src="lib.mjs"></script>
<script type="module" src="app.mjs"></script>
```
브라우저의 ES6 모듈 기능을 사용하더라도 트랜스파일링이나 번들링이 필요하기 때문에 아직까지는 Webpack 등의 모듈 번들러를 사용하는 것이 일반적이다.