14장 전역 변수의 문제점

변수의 생명 주기

변수는 선언에 의해 생성되고 할당을 통해 값을 갖는다. 그리고 언젠가 소멸한다. 즉, 변수는 생성되고 소멸되는 생명 주기(life cycle)가 있다.

변수에 생명 주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유하게 될 것이다.

지역 변수의 생명 주기

함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다.

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

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

지역 변수 x는 foo 함수가 호출되기 이전까지는 생성되지 않으며, 함수가 종료하면 x 변수도 소멸되어 생명 주기가 종료된다.

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

이 점을 인지하고, 다음의 예제를 보자.

var x = 'global';

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

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

foo 함수 내부에서 변수 x에 대한 출력은 어떻게 나올까?

foo 함수 내부에서 선언된 지역 변수 x는 foo가 호출될 시점에 이미 선언되었고 undefined로 초기화되어 있다. 따라서 전역 변수 x를 참조하는 것이 아니라 지역 변수 x를 참조해 값을 출력한다.

즉, 지역 변수는 함수 전체에서 유효하다. 단, 변수 할당문이 실행되기 이전까지는 undefined 값을 갖는다.

이처럼 호이스팅은 스코프를 단위로 동작한다.

전역 변수의 호이스팅은 전역 변수의 선언이 전역 스코프의 선두로 끌어 올려진 것처럼 동작하고, 지역 변수의 호이스팅은 지역 변수의 선언이 지역 스코프의 선두로 끌어 올려진 것처럼 동작한다.

자바스크립트의 호이스팅은 변수 선언이 스코프의 선두로 끌어 올려진 것처럼 동작한다.

전역 변수의 생명 주기

함수와 달리 전역 코드는 명시적인 호출 없이 실행된다. 전역 코드는 코드가 로드되자마자 곧바로 해석되고 실행되고, 마지막 문이 실행되어 더 이상 실행할 문이 없을 때 종료한다.

즉, 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다.

전역 변수의 문제점

📙 암묵적 결합

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

변수의 유효 범위가 크면 클수록, 코드의 가독성은 나빠지고 의도치 않게 상태가 변경될 수 있는 위험성도 높아진다.

📙 긴 생명 주기

전역 변수는 생명 주기가 길다. 그렇기 때문에 메모리 리소스도 오랜 기간 소비하기도 하며, 전역 변수의 상태를 변경할 수 있는 시간도 길고 기회도 많다.

또한 var 키워드는 변수의 중복 선언을 허용하기 때문에 생명 주기가 긴 전역 변수는 변수 이름이 중복될 가능성이 있다. 변수 이름이 중복되면 의도치 않은 재할당이 이뤄질 수 있다.

📙 네임스페이스 오염

자바스크립트의 가장 큰 문제점 중 하나는 파일이 분리되어 있다 해도 하나의 전역 스코프를 공유한다는 것이다. 다른 파일 내에서 동일한 이름으로 명명된 전역 변수가 존재할 경우 예상치 못한 결과를 가져올 수 있다.

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

즉시 실행 함수

12장 함수에서 살펴본 즉시 실행 함수를 사용하여 전역 변수의 사용을 제한할 수 있다. 즉시 실행 함수로 감싼 모든 변수는 즉시 실행 함수의 지역 변수가 된다.

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

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

모듈 패턴

모듈 패턴은 클래스를 모방해서 관련이 있는 변수와 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈을 만든다. 모듈 패턴은 전역 변수의 억제와 더불어 정보 은닉을 수행한다.

정보 은닉(information hiding)은 공개 범위를 한정짓는 것을 말하는데, 객체 지향 프로그래밍 언어는 이를 public, private 등의 접근 제한자를 사용해 정보 은닉을 구현한다.

하지만 자바스크립트에는 접근 제한자를 제공하지 않는다. 대신에, 모듈 패턴을 사용해 한정적으로 정보 은닉을 구현할 수 있다.

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

위 예제의 즉시 실행 함수는 객체를 반환한다. 이 객체에는 외부에 노출하고 싶은 변수나 함수를 담아 반환한다. 이때 반환되는 객체의 프로퍼티는 외부에 노출되는 public member 다.

외부에 노출하고 싶지 않은 변수는 반환하는 객체에 추가하지 않으면 외부에서 접근할 수 없는 private member가 된다.

ES6 모듈

ES6 모듈은 파일 자체의 독자적인 모듈 스코프를 제공한다. 모듈 내에서 var 키워드로 선언한 변수는 더는 전역 변수가 아니다.

script 태그에 type="module" 어트리뷰트를 추가하면 로드된 자바스크립트 파일은 모듈로서 동작한다. 모듈의 파일 확장자는 mjs를 권장한다.

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

모듈에 대해서는 48장에서 자세히 살펴보도록 하자.