전역 변수의 문제점

전역 변수를 선언하는 이유는?

 - 전역, 다시 말해 코드 어디서든 참조하고 할당할 수 있는 변수를 사용하는 것.

 

전역 변수의 문제점

 

암묵적 결합

 - 암묵적 결합 : 모든 코드가 전역 변수를 참조하고 변경하는 것을 혀용 하는 것.

• 변수의 스코프(유효범위)가 크면 클수록 코드의 가독성  ⬇  , 의도치 않게 상태가 변경될 수 있는 위험성  ⬆ .

 

긴 생명 주기 

• 전역변수는 생명주기가 길다.

     - 메모리 리소스도 오랜 기간 소비 

     - 전역 변수의 상태를 변경하는 시간도 길고, 기회도 많음.

     - var 키워드 같은 경우 변수의 중복 선언 허용하므로 생명 주기가 긴 전역 변수는 변수 이름이 중복성 있음

     ➡  의도치  않은 재할당됨.

       

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

  - 스코프 체인 : 스코프는 계층적으로 연결되며, 변수를 검색 시 변수를 참조하는 코드의 스코프에서 상위 스코프 방향.

    (아래 방향에서 위 방향)

• 전역 변수의 검색 속도 느림. (변수 검색 시 전역 변수는 가장 마지막에 검색됨)

       - 검색 속도의 차이는 그다지 크지 않지만 속도의 차이는 분명 있음.

네임스페이스 오염

 - 네임스페이스 오염 : 파일이 분리되어 있다 해도 하나의 전역 스코프를 공유해서, 다른 파일 내에서 전역 변수나 전역

                                    함수가 같은 스코프 내에 존재할 경우 예상치 못한 결과를 가져올 수 있음.

 

전역 변수의 사용을 억제(제한)하는 방법 

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

• 즉시 실행 함수

       - 즉시 실행 함수 : 함수 정의와 동시에 호출되는 함수를 단 한 번만 호출하는 것.

       - 즉시 실행 함수 사용 시 전역 변수를 생성하지 않으므로 라이브러리에서 자주 사용됨.

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

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

 위 예제 코드처럼  모든 코드를 즉시 실행 함수( ( ), parentheses )로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 됨.

• 네임스페이스 객체

       - 네임스페이스: 구분이 가능하도록 정해놓은 범위나 영역.(이름 공간을 선언하여 다른 공간과 구분하도록 한다)

       - 네임스페이스 객체 : 전역에 네임스페이스 역할을 담당할 객체를 생성하고 전역 변수처럼 사용하고 싶은 변수를

                                          프로퍼티로 추가하는 방법.

          - 네임스페이스를 분리해서 식별자 충돌을 방지하는 효과 그러나 네임스페이스 객체 자체가 전역 변수에 할당됨.                           

 

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

MYAPP.name = 'Lee';

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

위 예제처럼 네임스페이스 객체를 생성하고 사용하는 법이다.

 

네임스페이스 객체에 또 다른 네임스페이스 객체를 프로퍼티로 추가해서 네임스페이스를 계층적으로 구성 가능.

아래 예제가 네임스페이스를 계층적으로 구성하는 법이다.

var MYAPP = {};

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

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

 

• 모듈 패턴

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

          - 모듈 패턴은 자바스크립트의 강력한 클로저를 기반으로 동작.

          - 대부분의 객체지향 프로그래밍 언어는 접근 제한자(public, private, protected)를 사용해 공개 범위를 사용하나,

            자바스크립트는 접근 제한자를 제공하지 않음 .    

              - 특징 : 전역 변수의 억제, 캡슐화 구현 가능 

                   - 캡슐화 : 객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 동작인 메서드를 하나로 묶는 것. 
                         - 목적 : 정보 은닉(객체의 특정 프로퍼티나 메서드를 감출 목적으로 사용.)   

var Counter = (function() {
 
 var num = 0; // private 변수 private member
 // public member 외부로 공개할 데이터나 메서드를 프로퍼티로 추가한 객체를 반환.
 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

위 예제의 즉시 실행 함수는 객체를 반환함. 이 객체는 외부에 노출하고 싶은 변수나 함수를 담아 반환함.

이때 반환되는 객체의 프로퍼티는 외부에 노출되는 퍼블릭 멤버이며, 외부로 노출하고 싶지 않은 변수나 함수를 반환하는

객체에 추가하지 않으면 외부에 접근 할수 없는 프라이빗 멤버가 된다. 

• ES6 모듈