전역 변수의 문제점

이보아·2024년 5월 21일

JavaScript deep dive

모던_자바스크립트

목록 보기

11/18

전역변수의 무분별한 사용은 지양하는 것이 좋다. 🙅‍♀️

변수의 생명주기

지역 변수의 생명 주기

변수에게도 생명주기가 존재한다. 변수도 생성되고 소멸되는 생명 주기가 있다.

전역 변수의 생명 주기 = 애플리케이션의 생명 주기
내부에 선언된 지역 변수 = 함수의 생명 주기 (외부에서 참조하지 않을때)


   let a = "global";

   function foo() { 
   let x = "local";
   console.log(x);
   return x;
   }

   foo();
   console.log(a); // "global"
   console.log(x); // ReferenceError: x is not defined

👉 하기 예제로 전역 변수와 내부에 선언된 지역 변수의 차이를 확인 할 수 있다.

함수가 종료되고 지역변수 x 또한 사라져, 더 이상 존재하지 않는다.

하지만, 외부에서 해당 스코프나 변수를 참조하고 있을 경우 여전히 메모리가 존재하는 상황이 된다.

가비 콜렉터에 의해 해제되지 않은 상태이므로 내부에 선언된 지역 변수 = 함수의 생명 주기 말하기는 힘들다.

이부분은 클로저에서 자세히 살펴보자!


  var x = "global";

  function foo() {
  console.log(x); // undefined
  var x = "local";
  }

  foo(); // undefined
  console.log(x); // "global"

👉 함수 foo() 를 실행하니, 전역 변수 x 가 아닌 지역 변수 x 를 참조해 undefined 를 출력한다.

📄 호이스팅: 변수나 함수의 선언부가 스코프의 최상단으로 끌어올려지는 현상을 말한다.

전역 변수의 생명 주기

전역 변수는 프로그램 종료 시까지 계속해서 참조가 가능하다.
다만, 브라우저 환경에서는 전역 공간이 window 객체이기 때문에 브라우저 환경에서는 window 의 생명주기와 일치한다고 말해야 옳다.

전역 변수의 문제점

암묵적 결합: 코드 어디서든 참조하고 할당할 수 있는 변수를 사용하겠다. ⮕ 모든 코드가 전역 변수를 참조 변경 할 수 있는 암묵적 결합을 허용함
긴 생명 주기: 전역 변수는 생명 주기가 길다. ⮕ 메모리 리소스도 오랜시간 소비
스코프 체인 상에서 종점에 존재: 전역 변수는 스코프 체인 상에서 종점에 존재 ⮕ 전역 변수의 검색 속도라 가장 느리다.
네임스페이스 오염: 파일이 분리되어 있어도 하나의 전역 스코프를 공유한다 ⮕ 전역 변수나 전역 함수가 같은 스코프 내에 존재하는 경우 예상치 못한 결과 발생

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

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

즉시 실행 함수

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

(function () {
  let foo = 10;
})();

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

네임스페이스 객체

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

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

MYAPP.name = "LEE";

console.log(MYAPP.name); // "LEE"

👉 하지만, 결국 네임스페이스 객체가 전역 공간에서 선언되기때문에 유용하지는 않음

모듈 패턴

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

var Counter = function () {
  // private 변수
  var num = 0;

  return {
    increase() {
      return ++num;
    },
    decrease() {
      return --num;
    },
  };
};