[모딥다] JS (4) - 전역 변수의 문제점

1. 변수의 생명 주기

1) 지역 변수의 생명 주기

: 변수는 선언에 의해 생성되고 할당을 통해 값을 갖음. 그리고 소멸하는데 이러한 것을 생명 주기라고 함.

: 만약 생명주기가 없다면 종료하지 않는 한 영원히 메모리 공간을 점유하게 된다.

: 변수 선언은 선언문이 어디에 있든 상관 없이 가장 먼저 실행됨, 즉 한 줄 씩 순차적으로 실행되는 런타임 시점이 아닌 시작 전 자바스크립트 엔진에 의해 먼저 실행된다. => 전역 변수에 한정된 설명

: 지역 변수는 함수 몸체의 다른 문들이 순차적으로 실행 되기 이전에 자바스크립트 엔진에 의해 변수가 선언되고 undefined로 초기화 된다. 그 후 함수 몸체의 다른 문들이 순차적으로 실행 될 때 값의 할당이 이루어진다. 

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

: 함수 내부에서 선언된 지역 변수는 함수가 생성한 스코프에 등록된다. 

 

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

* 즉, 호이스팅은 변수 선언이 스코프의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 말함.

 

2) 전역 변수의 생명 주기

: 함수와 달리 전역 코드는 명시적인 호출 없이 실행 된다.

: 특별한 진입점이 없고 코드가 로드되자마자 곧바로 해석되고 실행됨.

 

2. 전역 변수의 문제점

1) 암묵적 결합 : 모든 코드가 전역 변수를 참조하고 변경할 수 있는 것

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

2) 긴 생명 주기 : 전역 변수는 생명 주기가 길다.

: 따라서 메모리 리소스도 오랜 기간 소비한다. 또한 전역 변수의 상태를 변경할 수 있는 시간도 길고 기회도 많다.

 

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

: 변수의 스코프는 좁을수록 좋다.

1) 즉시 실행 함수

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

2) 네임스페이스 객체

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

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

// case 1
MYAPP.name = "Lee";

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

// case 2
MYAPP.person = {
   name = "Lee2",
   address = "Seoul"
};

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

 

3) 모듈 패턴

: 모듈 패턴이란 클래스를 모방해서 관련이 있는 변수와 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈을 만든 것이다.

: 클로저를 기반으로 동작한다.

: 전역 변수 억제와 캡슐화까지 모두 구현 가능

* 캡슐화 : 객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 동작인 메서드를 하나로 묶는 것

var Counter = (function() {
    // private 변수
    var num = 0;
    
    // 외부로 공개할 데이터나 메서드를 프로퍼티로 추가한 객체를 반환한다.
    return {
      increase() {
          return ++num;
      },
      decrease() {
          return --num;
      }
     };
}());

// private 변수는 외부 노출 x
console.log(Counter.num); // undefined

console.log(Counter.increase()); // 1
console.log(Counter.increase()); // 2

 

4) ES6 모듈

: ES6 모듈 사시 더는 전역 변수사용할 수 없음.

: ES6 모듈은 파일 자체의 독자적인 모듈 스코프를 제공함.

: type="module" 추가하면 모든 JS 파일은 모듈로서 동작함.

: 모듈의 확장자는 .mjs를 권장함.