🔖 읽은 범위: 14 장 전역 변수의 문제점

☘️ 책갈피

• 전역 변수의 무분별한 사용은 위험하다.
  전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용해야 한다.

• 이번 장에서는 전역 변수의 문제점과 전역 변수의 사용을 억제할 수 있는 방법을 살펴보자.

• 생명 주기(life cycle): 변수는 생물과 유사하게 생성되고 소멸되는 생명 주기가 있다.

  • 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다.
    브라우저 환경에서 전역 객체는 window 이므로 브라우저 환경에서 var 키워드로 선언한 전역 변수는 객체 window 의 프로퍼티다.
  • 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다.

• 할당된 메모리 공간은 더 이상 그 누구도 참조하지 않을 때 가비지 콜렉터에 의해 해체되어 가용 메모리 풀에 반환된다. ... 이는 스코프도 마찬가지다.

• 전역 변수의 문제점

  • 암묵적 결합(implicit coupling): 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합을 허용하는 것이다. 변수의 유효 범위가 크면 클수록 코드의 가독성은 나빠지고 의도치 않게 상태가 변경될 수 있는 위험성도 높아진다.
  • 긴 생명 주기: 전역 변수는 생명주기가 길다. 따라서 메모리 소스도 오랜 기간 소비한다.
  • 스코프 체인 상에서 종점에 존재: 즉, 전역 벽수의 검색 속도가 가장 느리다.
  • 네임스페이스 오염: 자바스크립트의 가장 큰 문제점 중 하나는 파일이 분리되어 있다 해도 하나의 전역 스코프를 공유한다는 것이다. 따라서 다른 파일 내에서 동일한 이름으로 명명된 전역 변수나 전역 함수가 같은 스코프 내에 존재할 경우 예상치 못한 결과를 가져올 수 있다.

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

  • 즉시 실행 함수의 사용
    : 함수 정의와 동시에 호출되는 즉시 실행 함수는 단 한번만 호출된다. 모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 된다. 라이브러리 등에 자주 사용된다.

  (function () {
  	var foo = 10;
    ...
  }());
  
  console.log(foo); // ReferenceError: foo is not defined

  • 네임 스페이스 객체 사용:
    식별자 충돌을 방지하는 효과는 있으나 네임스페이스 객체 자체가 전역 변수에 해당되므로 그다지 유용해 보이지는 않는다.

  var MYAPP = {};
  
  MYAPP.name = 'lee';
  
  console.log(MYAPP.name); // lee

  • 모듈 패턴 사용:
    모듈 패턴은 클래스를 모방해서 관련 있는 변수와 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈을 만든다.
    클로저를 기반으로 동작한다.(24장 잠초)
    전역 변수의 억제는 물론 캡슐화까지 구현할 수 있다.
    • 캡슐화(encapsulation): 객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 동작 매서드를 하나로 묶는 것을 말한다.
    • ex) 아래 코드의 Counter.num 또는 Counter.increase() 등이 가능해지는 것.

  var Counter = (function () {
  	//private 변수
    var num = 0;
    
    // 외부로 공개할 데이터나 매서드를 프로퍼티로 추가한 객체를 반환한다.
    return {
    	increase() {
        	return ++num;
        },
        decrease () {
        	return --num;
        }
   } ());
   
   // private 변수는 외부로 노출되지 않는다.
   console.log(Counter.num); // undefined
   
   console.log(Coutner.increase()); // 1
   console.log(Coutner.increase()); // 2
   console.log(Coutner.decrease()); // 1
   console.log(Coutner.decrease()); // 0

  • ES6 모듈 사용:
    ES6 파일 자체의 독자적인 모듈 스코프를 제공한다. 따라서 모듈 내에서 var 키워드로 선언한 변수는 더는 전역 변수가 아니며 window 객체의 프로퍼티도 아니다.
    type="module" 속성으로 추가하면 로드된 자바스크립트 파일은 모듈로써 동작한다.
    모듈의 확장자는 mjs를 권장한다.

  <script type="module" scr="lib.mjs"></script>
  <script type="module" scr="app.mjs"></script>

❓ 추가 공부

• 네임스페이스(namespace):
  이름공간 또는 네임스페이스(영어: namespace)는 개체를 구분할 수 있는 범위를 나타내는 말로 일반적으로 하나의 이름 공간에서는 하나의 이름이 단 하나의 개체만을 가리키게 된다.

• 캡슐화(encapsulation): 객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 동작 매서드를 하나로 묶는 것을 말한다.

❗️ 느낀 점

💖 요약

• 전역 변수의 무분별한 사용은 위험하다. 전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용해야 한다.
• 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다. 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다.
• 전역 변수 사용시에는 여러가지가 있지만 가장 큰 문제는 다른 파일의 전역 변수도 사용할 수 있기 때문에 (자스의 전역 변수는 하나의 스코프 사용, 암묵적 허용) 네이밍스페이스 오염이라던가 파일 오류의 가능성이 올라간다.
• 전역 변수 사용 억제를 위한 방법에는: 1) 즉시 실행 함수 2) 네임 스페이스 객체 3) 모듈 패턴 사용 4) es6 모듈 사용 등이 있다.