지역변수 vs 전역변수

프로젝트를 하던 중 전역을 쓰다가 오류를 맞이한 적이 많다. 그래서 이번엔 지역, 전역 변수의 차이점, 전역 변수의 문제점, 해결방안을 포스트해보기로 했다.

💡 지역변수

• 변수는 선언에 의해 생성되고 할당을 통해 값을 얻는다.
• 가비지 컬렉션에 의해 언젠가 소멸된다.
• 변수는 생명주기를 갖고 있다.
• 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸된다.

💡 전역변수

• 특별한 진입점 없이 코드가 로드되면 바로 해석되고 실행된다.
• 반환문을 사용할 수 없고 마지막 문이 실행되어 더 이상 실행할 문이 없을 때 종료한다.
• 브라우저 환경에서 전역객체는 window이고 전역 변수는 전역 객체 window의 프로퍼티이다.
• 전역 객체는 웹페이지를 닫기 전까지 유효하다. 즉, 브라우저 환경에서 선언한 전역변수는 웹페이지를 닫을 때 까지 유효한다.

😈 전역 변수 문제점

1. 암묵적 결합
유효 범위가 크면 코드의 가독성이 나빠지고 의도치 않게 변경되어 위험성이 높아진다.

2. 긴 생명 주기
긴 생명주기로 인해 메모리 리소스도 오랜 기간 소비하고, 상태 변경에 의한 오류가 발생할 확률이 높다.

3. 스코프 체인상에서 종점에 존재
스코프 체인 상 종점에 존재하기 때문에 가장 마지막에 검색된다. 즉, 검색 속도가 가장 느리다.

4. 네임스페이스 오염
자바스크립트는 파일이 분리되어 있어도 전역 스코프는 공유한다. 다른 파일 내에서 동일한 이름으로 전역 변수나 전역 함수를 재 할당하는 오류를 범할 수 있다.

🔑 전역 변수 억제 방법

전역 변수를 반드시 사용해야 할 이유를 찾지 못하면 지역 변수를 사용해야 한다. 변수의 스코프는 좁을 수록 좋다. 전역 변수는 반드시 필요에 따라 사용하되 무분별한 전역변수의 남발은 억제해야한다.

1. 즉시 실행 함수

함수 정의와 동시에 호출되는 즉시 실행 함수는 단 한번만 호출된다. 모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역변수가 된다.

(function () {
  var foo = 10; // 즉시 실행 함수의 지역 변수
  // ...
}());

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

2. 네임스페이스 객체

전역에 네임스페이스 역할을 담당할 객체를 생성하고 전역변수처럼 사용하고 싶은 변수를 프로퍼티에 추가하는 방법이다. 네임스페이스는 객체에 또 다른 네임스페이스 객체를 프로퍼티로 추가해서 네임 스페이스를 계층적으로 구성할 수 있다.

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

MYAPP.person = {
  name: 'Han',
  address: 'Seoul'
};

console.log(MYAPP.person.name); // Han

3. 모듈 패턴

모듈 패턴은 클로저를 기반으로 동작하며 전역 변수의 억제와 캡슐화도 구현할 수 있다. 캡슐화를 통해서 객체에 대한 구체적인 정보를 노출시키지 않는다.(정보은닉)
자바스크립트는 접근제한자가 없으므로(public, private, protected) 클로저로 정보 은닉이 필요하다.

var Counter =(function () {
    //private 변수
    var num =0;
    
    return {
       increase() {
            return ++num;
            },
       decrease() {
            return --num;
            }
          }
     }());
// num 변수는 외부로 노출되자 않음
console.log(Counter.num) // undefined

console.log(Counter.increase()) // 1
console.log(Counter.decrease()) // 0
console.log(Counter.increase()) // 1
console.log(Counter.decrease()) // 0

4. ES6 모듈

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

<script type="module" src="lib.mjs"></script>
<script type="module" src="app.mjs"></script>

모던 브라우저(Chrome61, fFF60, SF10.1, Edge 16 이상)에서 사용할 수 있다.

참고

https://creatijin.tistory.com/241
https://velog.io/@ursr0706/%EC%A0%84%EC%97%AD-%EB%B3%80%EC%88%98%EC%9D%98-%EB%AC%B8%EC%A0%9C%EC%A0%90