[JavaScript] 전역 변수의 문제점

변수의 생명 주기

변수는 생물과 유사하게 생성되고 소멸되는 생명 주기를 가지고 있고 자신이 선언된 위치에서 생성되고 소멸됩니다.

변수의 생명 주기는 메모리 공간이 확보된 시점부터 메모리 공간이 해제되어 가용 메모리 풀에 반환되는 시점까지를 의미합니다.

 

종류	생명 주기
지역 변수	- 함수의 생명 주기와 대부분 일치 - 함수가 호출되면 생성되고 함수가 종료하면 소멸
전역 변수	- *전역 객체의 생명 주기와 일치 - 코드가 로드되자마자 곧바로 해석되고 실행됨 - 애플리케이션의 생명 주기와 같음

 

*전역 객체 : 코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체. 브라우저 환경은 window 객체, Node.js 환경에서는 global 객체를 의미함

 

 

전역 변수의 문제점

var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 되는데, 이런 전역 변수엔 4가지 문제점이 존재합니다.

 

암묵적 결합

• 모든 코드가 전역 변수를 참조하고 변경할 수 있는 것을 의미
• 변수의 유효변위가 크면 클수록 가독성이 나빠지고 의도치 않게 상태가 변경될 수 있는 위험성이 높아짐

긴 생명 주기

• 전역 변수는 생명 주기가 길어서 메모리 리소스를 오랜 기간 소비함
• 전역 변수의 상태를 변경할 수 있는 시간이 길어지고 기회가 많아짐
• var 키워드는 변수의 중복 선언을 허용해서 변수 이름이 중복되어 의도치 않은 재할당이 일어남

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

• 변수를 검색할 때 전역 변수가 가장 마지막에 검색됨
• 전역 변수의 검색 속도가 가장 느림

네임스페이스 오염

• 자바스크립트는 파일이 분리되어 있어도 하나의 전역 스코프를 공유함
• 다른 파일 내에서 동일한 이름으로 명명된 전역 변수나 전역 함수가 같은 스코프 내에 존재할 경우 에러가 발생함

 

 

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

변수의 스코프는 좁을수록 좋기 때문에 전역 변수를 반드시 사용해야 할 이유가 없다면 지역 변수를 사용해야 합니다.

전역 변수의 사용을 억제할 수 있는 방법 몇가지를 알아보겠습니다.

 

즉시 실행 함수

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

console.log(foo); // ReferenceError

• 함수 정의와 동시에 호출되는 즉시 실행 함수는 단 한번만 호출됨
• 따라서 모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가됨
• 라이브러리 등에 자주 사용되는 방식

네임스페이스 객체

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

// 변수를 프로퍼티로 추가
MYAPP.name = 'Lee';

// 객체를 프로퍼티로 추가
MYAPP.person = {
    name: 'Lee',
    address: 'Seoul'
};

console.log(MYAPP.name); // Lee
console.log(MYAPP.person.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

위 예제와 같이 즉시 실행 함수 Counter는 객체를 반환하는데, 이때 반환되는 객체의 프로퍼티는 외부에 노출되는 퍼블릭 멤버이고 반환 객체에 추가하지 않은 변수나 함수는 프라이빗 멤버가 됩니다.

 

**대부분의 객체지향 프로그래밍 언어는 접근 제한자를 사용해 공개 범위를 한정하지만, 자바스크립트는 한정적이긴 하지만 정보 은닉을 위해 모듈 패턴을 사용합니다.

 

ES6 모듈

ES6 모듈은 파일 자체의 독자적인 모듈 스코프를 제공하기 때문에 전역 변수를 사용할 수 없습니다.

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

• IE를 포함한 구형 브라우저에서는 동작하지 않음
• 트랜스파일링이나 번들링이 필요함
• 아직까지는 ES6 모듈 기능보단 Webpack 등의 모듈 번들러를 사용하는 것이 일반적

 

 

 

[출처] 모던 자바스크립트 Deep Dive

https://wikibook.co.kr/mjs/

모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리