<모던 자바스크립트 Deep Dive> 14장 전역 변수의 문제점 요약

14. 전역 변수의 문제점

1) 변수의 생명 주기

- 변수는 생성, 소멸되는 생명 주기(Life cycle)를 가짐

- "자신이 선언된 위치"에서 생성, 소멸되는데 따라서 전역 변수는 애플리케이션 생명 주기를 갖고, 지역 변수는 함수 생명 주기를 가짐

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

foo();
console.log(x); // ReferenceError: x is not defined
//지역 변수 x는 foo 함수가 호출되어 실행되는 동안에만 유효함

 

- 단, 지역 변수의 경우 해당 함수 스코프가 어딘가에서 계속 참조 중이라면 사라지지 않음

- 호이스팅이란 변수 선언이 스코프의 선두에 이루어지는 것을 뜻하며, 자바스크립트 엔진에 의해 전역 변수는 실행 전 제일 먼저, 지역 변수는 함수 내부에서 제일 먼저 선언이 이루어짐

var x = 'global';

function foo() {
	console.log(x); // undefined - 호이스팅에 의해 변수의 선언만 이루어진 상태
	var x = 'local';
}

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

 

- 특히 전역 변수는 var 키워드로 선언된 경우, 전역 객체의 프로퍼티가 되어 전역 객체의 생명 주기를 가지게 됨

- 전역 객체란 코드 실행 전 자바스크립트 엔진에 의해 가장 먼저 생성되는 특수한 객체로, 클라이언트 사이드 환경(브라우저)에서는 window, 서버 사이드 환경(Node.js)에서는 global 객체를 의미

 

 

2) 전역 변수의 문제점

1. 암묵적 결합

- 모든 코드가 전역 변수를 참조, 변경 가능하게 되는 것을 뜻함

- 코드의 가독성이 나빠지고, 상태 변경의 위험성 높아짐

 

2. 긴 생명 주기

- 전역 변수는 생명주기가 길기 때문에 상태 변경에 의한 오류가 발생할 확률 높아짐

 

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

- 전역 변수는 스코프 체인 상에서 종점에 존재하기 때문에, 가장 마지막에 검색되므로 검색 속도가 제일 느리다고 할 수 있음

 

4. 네임스페이스 오염

- 전역 변수는 파일이 달라도 전체가 공유함

- 동일 이름의 전역 변수나 함수가 존재할 위험성 존재

 

 

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

- "전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용해야 한다."

 

1. 즉시 실행 함수

- 모든 코드를 즉시 실행 함수 블록으로 감쌈 -> 전역 변수 사라짐

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

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

 

2. 네임스페이스 객체

- 네임스페이스의 역할을 하는 객체에 전역 변수처럼 사용하고 싶은 변수를 프로퍼티에 추가

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

MYAPP.name = 'Lee';

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

 

3. 모듈 패턴

- 관련있는 변수, 함수를 즉시 실행 함수로 감싸 하나의 모듈로 만듦

- 흡사 클래스와 같음

- 전역 변수의 억제 + 캡슐화(+ 정보은닉)

- 정보은닉과 관련하여, 자바스크립트는 접근제한자가 따로 없으므로 개발자가 직접 만들어주어야 함(퍼블릭 멤버, 프라이빗 멤버)

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

 

4. ES6 모듈

- 전역 변수 사용이 불가함

- 독자적 모듈 스코프를 제공

- 모듈 어트리뷰트를 추가하여 사용 가능하며 구형 브라우저는 사용이 불가함

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

 

- 일반적으로 브라우저보다 웹팩 등의 모듈 번들러를 사용

 

 

 

 

 

참고 : 도서 <모던 자바스크립트 Deep Dive>