14.1 변수의 생명 주기

14.1.1 지역변수의 생명 주기

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

function foo() {
  var x = 'local';
  console.log(x); // local
  return x;   // 변수 x가 소멸되는 시점
}

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

변수 호이스팅

• 호이스팅은 스코프를 단위로 동작한다
• 변수 선언이 ‘스코프’의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징

var x = 'global';

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

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

• 함수 내부로 이동하게 되면 코드 평가가 시작됨
• var x이므로 ‘global’로 할당한 전역 변수 x는 함수내부의 지역변수 x로 재선언되고 undefined가 할당됨
• x = ‘local’이라는 할당문이 아직 실행되지 않았기 때문에 undefined인 것!
• 전역 변수가 아니라 지역 변수를 참조하기 때문!

14.1.2 전역 변수의 생명 주기

• var 키워드로 선언한 전역 변수의 생명주기는 전역 객체의 생명 주기와 일치
• var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 된다

14.2 전역 변수의 문제점

암묵적 결합

• 모든 코드가 전역 변수를 참조하고 변경할 수 있는 것
• 변수의 유효 범위가 클수록 코드의 가독성이 나빠지고 의도치 않은 상태 변경이 일어날 수 있다.

긴 생명 주기

• 전역 변수는 생명 주기가 길다 = 메모리를 오랜 기간 소비한다

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

• 변수를 검색할 때 전역 변수가 가장 마지막에 검색되므로 전역 변수의 검색 속도가 가장 느리다

네임스페이스 오염

• 자바스크립트는 파일이 분리되어 있어도 하나의 전역 스코프를 공유

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

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

14.3.1 즉시 실행 함수

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

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

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

라이브러리 등에 자주 사용되는 방법

14.3.2 네임스페이스 객체

• 전역에 네임스페이스 객체를 생성하여 전역 변수로 사용하고자 하는 변수를 프로퍼티로 등록한다.

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

MYAPP.name = 'Lee';

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

• 객체 안에 또 다른 네임스페이스 객체를 추가하여 계층적으로 구성하는 방법

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

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

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

14.3.3 모듈 패턴

• 클래스를 모방하여 관련있는 변수와 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈로 만드는 것
• 클로저 기반으로 동작
• 전역 변수의 억제와 캡슐화를 구현할 수 있음

캡슐화

• 객체의 프로퍼티와 메서드를 하나로 묶는 것
• 정보 은닉 목적으로 사용
  • 객체의 특정 프로퍼티나 메서드를 감추는 목적
• 자바 등의 객체 지향 프로그래밍에서 사용하는 접근 제한자 (public, private, protected) 대신 모듈 패턴을 사용하여 정보 은닉 구현

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 모듈

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