전역 변수의 문제점

Posted by Seongkyun Yu on 2020-02-27
Estimated Reading Time 1 Minutes
Words 261 In Total
Viewed Times

변수의 생명 주기

  • 지역 변수의 생명 주기

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

    1
    2
    3
    4
    5
    6
    7
    var a = "전역변수";

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

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


전역 변수의 생명 주기

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

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

전역 변수의 문제점


  • 암묵적 결합

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

  • 긴 생명 주기

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

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

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

  • 네임스페이스 오염

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


전역 변수 사용 억제 방법

  • 즉시 실행 함수

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

  • 네임 스페이스 객체

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

  • 모듈 패턴

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    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


If you like this blog or find it useful for you, you are welcome to comment on it. You are also welcome to share this blog, so that more people can participate in it. If the images used in the blog infringe your copyright, please contact the author to delete them. Thank you !