14장 전역 변수의 문제점

14.1 변수의 생명 주기

14.1.1 지역 변수의 생명 주기

• 변수는 자신이 선언된 위치에서 생성되고 소멸한다.
• 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다.
• 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다.
• 변수 선언은 런타임 이전에 먼저 실행 되는데, 이건 전역 변수에 한정된 설명이다.
• 함수 내부에 선언된 변수는 함수가 호출 된 직후에 함수 몸체의 코드가 순차적으로 실행되기 이전에 먼저 실행 된다.
• 지역 변수의 생명 주기는 함수의 생명주기와 일치한다.
• 하지만, 절대적인건 아니고 함수의 생명주기보다 오래 생존하는 경우도 있다.
• 변수는 자신이 등록된 스코프가 소멸(메모리 해제)될 때까지 유효하다. 할당된 메모리 공간은 더 이상 그 누구도 참조하지 않을 때 가비지 콜렉터에 의해 해제되어 가용 메모리 풀에 반환된다.
• 일반적으로 함수가 종료하면 함수가 생성한 스코프도 소멸한다. 하지만 누군가가 스코프를 참조하고 있다면 스코프는 해제되지 않고 생존하게 된다. 이를 클로저라고 한다.

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

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

14.1.2 전역 변수의 생명 주기

• 전역코드에는 함수와 달리 반환문을 사용할 수 없으므로 마지막 문이 실행되어 더 이상 실행할 문이 없을 때 종료한다.
• var 키워드로 선언한 전역 변수의 생명 주기는 전역 객체의 생명 주기와 일치한다.

14.2 전역 변수의 문제점

• 암묵적 결합
  • 전역 어디서든 참조하고 할당 할 수 있는 변수로 사용하기 위해 전역 변수를 선언했지만, 이는 모든 코드가 전역 변수를 참조하고 변경할 수 있다.
• 긴 생명 주기
  • 전역 변수는 생명 주기가 길다. 메모리 리소스도 오랜 기간 소비하고, 언제든 상태를 변경할 수 있는 시간도 길고 기회도 많다.
• 스코프 체인 상에서 종점에 존재
  • 스코프 체인상 종점에 위치하기 때문에 전역 변수의 검색 속도가 가장 느리다.
• 네임스페이스 오염
  • 자바스크립트의 가장 큰 문제점 중 하나는 파일이 분리되어 있다 해도 하나의 전역 스코프를 공유한다는 것이다.

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

• 전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용해야 한다. 변수의 스코프는 좁을수록 좋다.

14.3.1 즉시 실행 함수

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

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

14.3.2 네임스페이스 객체

• 전역에 네임스페이스 역할을 담당할 객체를 생성하고 전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가하는 방법

var MYAPP = {}; // 전역 네임스페이스 객체
MYAPP.name = 'Lee';
console.log(MYAPP.name); // Lee
// 계층적으로 구성도 가능
MYAPP.person = {
    name: 'Lee',
    address: 'Seoul',
}
console.log(MYAPP.person.name); // Lee

• 식별자 충돌은 방지 했으나, 네임스페이스 객체 자체가 전역 변수에 할당된다.

14.3.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

• 외부로 노출하고 싶지 않은 변수나 함수는 반환하는 객체에 추가하지 않으면 외부에서 접근할 수 없는 프라이빗 멤버가 된다.

14.3.4 ES6 모듈

• ES6 모듈은 파일 자체의 독자적인 모듈 스코프를 제공한다. 모듈 내에서 var 키워드로 선언한 변수는 더는 전역 변수가 아니며 window 객체의 프로퍼티도 아니다.
• 모듈의 파일 확장자는 mjs를 권장한다.

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

• ES6 모듈은 IE를 포함한 구형 브라우저에서는 동작하지 않는다.