[Javascript]전역변수의 문제점

조재권·2021년 6월 24일

frontend js

모던_자바스크립트_DeepDive

목록 보기

15/18

14장 전역 변수의 문제점

출처 모던 자바스크립트 Deep Dive을 보고 정리한 내용입니다.

변수의 생명주기

전역 변수의 생명주기는 어플리케이션의 생명주기와 같다. 지역 변수의 생명주기는 함수의 호출과 함께 생성되고, 함수의 종료에 의해 소멸된다. 즉, 지역 변수의 생명주기는 함수의 생명주기와 같다. 단 함수가 종료되었어도 함수를 계속 참조하고 있다면 가비지 컬렉터는 이를 소멸시키지 않는다.

var x = 'global';

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

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

변수의 호이스팅은 이전 자바스크립트의 변수를 다룬 글에서 코드의 실행단계 이전에 최상단에 변수를 정의하고, undefined로 할당하는 것을 말한다. 그러나 언제나 코드의 최상단에서 정의되는 것은 아니다. 지역 스코프에서 선언된 변수는 지역 스코프의 최상단에서 정의되어 undefined으로 초기화된다. 즉, 호이스팅은 변수 선언이 스코프의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 말한다.

전역 변수의 문제점

전역 변수는 함수와는 달리 호출없이 코드가 로드되자마자 곧바로 실행되며, 반환문 또한 사용할 수 없다, 그렇기 때문에 var 키워드를 사용하여 선언된 전역 변수는 전역 객체의 프로퍼티가 된다. 전역 객체는 브라우저 환경에서 window이다. 전역 객체 window는 웹페이지를 닫기 전까지 유효하기 때문에 var 키워드를 사용하여 선언된 전역 변수의 생명 주기는 프로그램의 생명 주기와 같다. 이러한 전역 변수의 특성 때문에 다음과 같은 문제점을 야기한다.

모든 코드가 전역변수를 참조하고 변경할 수 있는 암묵적 결합이 허용된다. 그렇기 때문에 변수의 상태 추적이 어려워져 가독성이 떨어지게 된다.
생명주기가 길기 때문에 메모리 리소스에 오랜기간동안 소비된다. 또한 중복된 변수명이 사용되어 재할당 될 가능성이 있다.
스코프 체인상 종점에 위치하기 때문에 참조 검색 속도가 느리다.
자바스크립트는 파일을 공유하기 때문에 프로그램이 하나의 전역변수를 참조할 수 있다.

해결책

즉시 실행 함수

(function () {
	var foo = 1;
	console.log(foo); //1
}());

console.log(foo);//ReferenceError

즉시 실행 함수를 사용하면 함수 내에서 사용하는 변수는 모두 지역 변수가 되고, 즉시 실행 함수는 단 한번만 호출되기 때문에 함수의 종료와 함께 변수가 소멸한다.

네임스페이스 객체

var MYAPP = {};

MYAPP.name = 'JK';

console.log(MYAPP.name); //'JK'

네임스페이스를 분리하여 식별자 충돌을 방지할 수 있으나 네임스페이스 객체 자체가 전역 변수이기 때문에 추천하지 않는다.

모듈 패턴

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.decrease()); //0