전역 변수의 문제점

기존 블로그에 작성한 내용을 velog로 이전한 글입니다

1. 변수의 생명 주기

• 지역 변수의 생명 주기

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

  var a = "전역변수";
  
  function local_test() {
    console.log(a);
    var a = "지역변수";
    return a;
  }

  위 코드에서 console.log(a)는 undefined를 출력하는데 함수 내부의 var a가
  호이스팅으로 먼저 선언되고 undefined가 된 상태에서 출력했기 때문이다.

2. 전역 변수의 생명 주기

전역 변수의 생명 주기는 전역 객체의 생명 주기와 일치한다.

전역 객체:
런타임 이전에 자바스크립트 엔진에 의해 생기는 특수한 객체.
전역 객체에는 표준 빌트인 객체, 환경 호스트 객체들이 들어간다.

3. 전역 변수의 문제점

• 암묵적 결합

  모든 코드가 전역 변수를 참고하고 변경할 수 있다.

• 긴 생명 주기

  생명 주기가 길기 때문에 리소스를 오래 소비하고 값이 변경될 가능성이 크다.

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

  전역 변수는 가장 나중에 검색 되므로 변수 검색 속도가 가장 느리다.

• 네임스페이스 오염

  파일이 분리되어 있어도 하나의 전역 스코프를 공유하기 때문에
  변수 값이 오염될 확률이 높다.

4. 전역 변수 사용 억제 방법

• 즉시 실행 함수

  함수의 정의와 동시에 호출되는 즉시 실행 함수는 독립적인 스코프를 갖게 된다.

• 네임 스페이스 객체

  전역에 네임 스페이스 역할을 담당할 객체를 생성하고 전역 변수를 추가하는 방법이다. 하지만 네임 스페이스 자체가 전역 변수이기 때문에 크게 유용하지 않다.

• 모듈 패턴

  변수와 즉시 실행 함수를 활용하여 하나의 모듈을 만든다. 전역 변수를 억제하고 캡슐화까지 구현할 수 있다.(Java의 public, private, protected)

  const calc = (function () {
    // private 변수
    var num = 0;
  
    // 외부로 공개할 데이터나 메소드
    return {
      sum(x, y) {
        return x + y;
      },
      minus(x, y) {
        return x - y;
      },
    };
  })();
  
  console.log(calc.sum(2, 3)); /// 5

• ES6 모듈

  script 태그에 type=”module” 어트리뷰트를 추가하면 로드된 자바스크립트 파일은 모듈로서 동작한다.

참고자료: poiemaweb.com