JS 전역 변수의 문제점

2020-08-18

전역 변수의 무분별한 사용은 위험하다. 전역 변수를 반드시 사용할 이유가 없다면 지역 변수를 사용하는 것이 좋다.

전역 변수의 문제점

암묵적 결합

전역변수를 선언한 의도는 코드 어디에서든 전역 변수를 사용하겠다는 것이다. 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합(implicit coupling)을 허용 한다.

긴 생명주기

전역 변수는 생명 주기가 길다. 전역 변수의 상태를 변경할 수 있는 시간도 길고, 모든 함수가 참조할 수 있기 때문에 상태를 변경할 기회도 많다. 또한 메모리 리소스도 오랜 기간 소비한다. 변수의 중복 선언을 허용하므로 변수 이름이 중복될 가능성이 있다.

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

스코프 체인 상에서 종점에 존재한다. 이는 변수를 검색할 때 전역 변수가 가장 마지막에 검색되어 전역 변수의 검색 속도가 가장 느리다.

네임 스페이스 오염

파일이 분리되어 있다하여도 하나의 전역 스코프를 공유하기 때문에 다른 파일 내에서 동일한 이름으로 명명된 변수나 함수가 같은 스코프 내에 존재할 경우 예상치 못한 결과를 가져올 수 있다.

전역 변수 사용 억제 방법

즉시 실행 함수

모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 된다.

네임 스페이스 객체

전역에 네임 스페이스(Namespace) 역할을 담당할 객체를 생성하고 전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가한다. 네임 스페이스 객체에 또 다른 네임 스페이스 객체를 프로퍼티로 추가하여 네임 스페이스를 계층적으로 구성할 수도 있다. 네임 스페이스를 분리하여 식별자 충돌을 방지하는 효과는 있으나 네임 스페이스 객체 자체가 전역 변수에 할당 된다.

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

MYAPP.name = 'kim';

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

모듈 패턴

클래스를 모방하여 관련이 있는 변수와 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈을 만든다. 모듈 패턴은 자바스크립트의 강력한 기능인 클로저를 기반으로 동작한다. 모듈 패턴은 전역 변수의 억제는 물론 캡슐화까지 구현할 수 있다.

ES6 모듈

script 태그에 type="module" 어트리뷰트를 추가하면 로드된 자바스크립트 파일은 모듈로서 동작한다. 모듈의 파일 확장자는 mjs를 권장한다. 하지만 ES6 모듈은 IE를 포함한 구형 브라우저는 동작하지 않으며, 브라우저의 ES6 모듈 기능을 사용하더라도 트랜스파일링이나 번들링이 필요하다.

REFERENCE
https://poiemaweb.com