[Deep dive] 14. 전역 변수의 문제점

변수는 종료하지 않는 한 영원히 메모리 공간을 점유한다.

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

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

1. 변수x는 자바스크립트 엔진에 의해 먼저 실행되어 undefined로 초기화된다.
2. 함수 몸체가 순차적으로 실행되면 x변수의 값이 할당된다.
3. 함수가 종료하면 x변수도 소멸되어 생명 주기가 종료된다.

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

스코프가 소멸될때까지 유효하다.

호이스팅

var x = 'global';

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

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

1. 변수 할당문이 실행되기 이전까지 ①은 undefined
   --> 호이스팅은 변수 선언이 스코프의 선두로 올려진거처럼 동작하는것을 말한다.

전역 변수의 생명주기

전역 변수의 생명주기는 마지막 문이 실행되어 더이 상 실행할 문이 없을 때 이다.

❖ 전역 객체

var로 선언한 전역 변수는 전역 객체의 프로퍼티가 된다.
--> 전역 변수의 생명 주기 == 전역 객체의 생명 주기

전역 객체는 코드가 실행되기 전에 자바스크립트에서 어떤 객체보다도 먼저 생성되는 객체

브라우저 환경에서 전역 객체는 window이므로 var 전역 변수는 window의 프로퍼티이다.

---

문제점

1. 암묵적 결합

변수의 유효 범위가 클수록 가독성 ↓, 위험성 ↑

2. 긴 생명주기

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

변수를 검색할 때 전역 변수가 마지막에 검색되어 검색 속도가 느림

4. 네임스페이스 오염

다른 파일 내 동일 이름 전역 변수가 같은 스코프 내 존재할 가능성

전역 변수의 사용 억제

변수의 스코프는 좁을수록 좋으므로 지역 변수를 되도록 사용하는것이 좋다.

즉시 실행 함수 사용

즉시 실행 함수를 사용하면 지역 변수가 되므로 전역 변수를 생성하지 않음

네임스페이스 객체

전역에 네임스페이스 역할을 하는 객체를 생성하여 전역 변수처럼 사용

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

MYAPP.person = {
  name: 'Lee',
  address: 'Seoul'
};

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

식별자 충동을 방지할 수 있으나 네임스펭이스 객체가 전역 변수에 해당하므로 유용할지는 모르겠음

모듈 패턴

모듈패턴: 클래스를 모방해 변수와 함수를 즉시 실행 함수로 감싸 하나의 모듈로 만든 것

자바스크립트는 private, public등을 제공하지 않으므로 모듈 패턴으로 네임스페이스의 오염을 막고 정보 은닉을 구현할 때 사용한다.

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