[모던 자바스크립트 Deep Dive] 14장 : 전역 변수의 문제점 - JS

변수의 생명 주기

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

 

*생명 주기가 필요한 이유

 생명 주기가 없다면 메모리 공간을 영원히 점유한다.

---

지역 변수의 생명 주기

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

function foo() {
  var x = 'local';
  console.log(x); // local
  return x;
}

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

함수 foo()가 종료했기 때문에 위 코드는 애러가 뜬다.

함수의 종료와 동시에 지역 변수 x의 삶도 마감하기 때문이다.

 

 

*호이스팅은 스코프를 단위로 동작한다

 

 

전역 변수의 생명 주기

전역 변수의 생명 주기는 애플리케이션의 생명 주기와 일치한다.

 

※ 전역 변수의 문제점

1. 암묵적 결합
   
2. 긴 생명 주기
3. 스코프 체인 상에서 종점 존재
4. 네임스페이스 오염

📙 암묵적 결합

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

그렇다는 말은 유효 범위가 크다는 말이고 유효 범위가 크면 가독성이 나빠지고 코드가 변할 수 있는 위험성이 높아진다.

 

📙 긴 생명 주기

전역 변수의 생명주기는 애플리케이션 생명 주기이므로 메모리 리소스도 오랜 기간 소비한다.

또한 변수 이름이 중복될 가능성도 높다. 변수의 이름이 중복되면 의도치 않은 재할당이 이루어질 수도 있다.

 

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

종점에 존재하기 때문에 전역 변수의 검색 속도가 가장 느리다.

 

📙 네임스페이스 오염

다른 파일 내 동일한 이름의 전역 변수가 존재할 경우 예상치 못한 결과를 가져올 수 있다.

 

 

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

1. 즉시 실행 함수
2. 네임스페이스 객체
3. 모듈 패턴
4. ES6 모듈

📗 즉시 실행 함수

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

(function () {
  var 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;
    }
  }
}());

// 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 모듈

ES6 모듈은 파일 자체의 독자적인 모듈 스코프를 제공한다.

 

 

좋아요는 로그인하지 않아도 누를 수 있습니다!