전역 변수의 문제점

변수의 생명 주기

전역 변수의 생명 주기는 마지막 문이 실행되어 더 이상 실행할 문이 없을 때 해제된다.
지역 변수의 경우 함수 몸체의 마지막 문 또는 반환문이 실행될 때 해제된다.

전역객체(global Object)

• 코드 실행되기 이전 단계에 js 엔진에 의해 가장 먼저 생성되는 특수한 객체다.
• 브라우저에서는 window 서버 사이드 환경에서는 global 객체를 의미한다.
• 표준 빌트인 객체와 환경에 따른 호스트 객체, var 키워드로 선언한 전역 변수와 전역 함수를 프로퍼티로 갖는다.

전역 변수의 문제점

암묵적 결합

코드 어디서든 참조하고 할당할 수 있는 것을 의미한다.
변수의 유효범위가 클수록 가독성은 나빠지고 의도치 않은 상태가 생길 수 있다.

긴 생명 주기

전역 변수는 생명 주기가 길다. 따라서 메모리 리소스도 오랜 기간 소비한다.

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

변수를 검색할 때 전역 변수가 가장 마지막에 검색된다는 것을 의미한다.

네임스페이스 오염

js의 가장 큰 문제점 중 하나는 파일이 분리되어 있더라도 하나의 전역 스코프를 공유하는 것이다.
따라서 다른 파일 내에서 동일한 이름으로 명명된 전역 변수나 전역 함수가 같은 스코프 내에 존재할 경우 예상치 못한 결과를 가져올 수 있다.

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

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

즉시 실행 함수

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

(function () {
  var foo = 10;
  // ...
}());
console.log(foo()) // undefined

네임스페이스 객체

네임스페이스를 분리하여 식별자 충돌 방지하는 효과가 있으나 네임스페이스 객체 자체가 전역 변수에 할당되므로 그다지 유용하지 않다.

var MYAPP = {}; // 네임스페이스 객체
MYAPP.name = "Lee";
console.log(MYAPP.name);
MYAPP.person = {
  name:"lee",
  address:"busan"
}

모듈 패턴

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

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

ES6 모듈

ES6모듈은 파일 자체의 독자적인 모듈 스코프를 제공한다. 따라서 모듈 내에서 var 키워드로 선언한 변수는 더는 전역 변수가 아니며 window 객체의 프로퍼티도 아니다

<script type="module" src="lib.mjs"></script> // type module로 선언 확장자는 mjs를 권장한다.
<script type="module" src="lib.mjs"></script>

---

let const 키워드와 블록 레벨 스코프

var 키워드의 선언한 변수의 문제점

• 변수 중복 선언 허용 : 여러번의 선언 가능함으로 예측불가의 상황이 발생됌
• 함수 레벨 스코프 : for문등 코드블럭내에서 선언하더라도 전역변수로 선언되어 남발하게 되는 경우가 발생됌
• 변수 호이스팅 : 런타임 이전에 선언이 되기에 선언문 전에 값 할당이 가능함으로 인해 예측불가의 상황이 발생됌

let 키워드

특징

• 변수 중복 선언 금지
• 블록 레벨 스코프
• 변수 호이스팅 : 변수 호이스팅이 발생하나 var와 달리 동작한다. 선언문 이전에 참조시 참조 에러 발생
• 전역 객체 : let의 경우 전역변수로 선언해도 window에 추가 되지 않는다.

const 키워드

특징

• 선언과 초기화 동시에 해야한다.
• 재할당 금지 (불변과는 다르다. 재할당만 금지일뿐, 객체의 경우 값이 변경되는 것이기에 변경가능)
• 상수

js 변수 가이드

• ES6를 사용한다면 var 키워드는 사용하지 않는다
• 재할당이 필요한 경우에 한정해 let 키워드를 사용한다. 이때 변수의 스코프는 최대한 좁게 만든다.
• 변경이 발생하지 않고 읽기 전용으로 사용하는 원시 값과 객체에는 const 키워드를 사용한다.