변수의 생명주기

지역 변수의 생명주기

function foo() {
  var x = 'local';
  console.log(x); // local
  return 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 키워드로 선언한 전역변수의 생명주기는 전역 객체의 생명주기와 일치한다
• 웹 페이지를 닫기 전까지 유효하다

전역객체 : 브라우저 환경에서 전역 객체는 window이고 var 키워드로 선언한 전역 변수는 window의 프로퍼티이다.

전역변수의 문제점

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

• 스코프 체인 상에서 종점에 존재한다. 전역변수의 검색속도가 가장 느리다.

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

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

• 즉시 실행 함수
• 네임스페이스 객체
• 모듈패턴
• ES6 모듈

모듈 패턴

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

• 즉시 실햄 함수로 감싸 하나의 모듈을 만든다
• 정보 은닉을 위해 많이 사용한다.