📖 전역 변수의 문제점

전역 변수의 무분별한 사용은 위험하다. 전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용해야 한다.

✔️ 변수의 생명 주기

변수는 선언에 의해 생성되고, 할당을 통해 값을 가지며 언젠가 소멸한다. 즉, 변수는 생명 주기가 있다.
변수에 생명 주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유하게 된다..

⭐️ 지역 변수의 생명 주기

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

⭐️ 전역 변수의 생명 주기

var 키워드로 선언한 전역 변수의 생명 주기는 전역 객체의 생명 주기와 일치한다.

✔️ 전역 변수의 문제점

⭐️ 암묵적 결함

전역 변수를 선언한 의도는 전역, 즉 어디서든 참조하고 할당할 수 있는 변수를 사용하겠다는 것이다. 이는 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결함을 허용하는 것이다.
변수의 유효 범위가 크면 클수록 코드의 가독성은 나빠지고 의도치 않게 상태가 변경될 수 있는 위험성도 높아진다.

⭐️ 긴 생명 주기

전역 변수는 생명 주기가 길다. 따라서 메모리 리소스도 오랜 기간 소비한다. 또한 전역 변수의 상태를 변경 할 수 있는 시간도 길고 기회도 많다.

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

전역 변수는 스코프 체인 상에서 종점에 존재한다. 이는 변수를 검색할 때 전역 변수가 가장 마지막에 검색된다는 것을 말한다. 즉 전역 변수의 검색 속도가 가장 느리다.

⭐️ 네임스페이스 오염

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

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

전역 변수의 무분별한 사용은 위험하다. **전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용해야 한다. 변수의 스코프는 좁을수록 좋다

⭐️ 즉시 실행 함수

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

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

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

⭐️ 네임스페이스 객체

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

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

MYAPP.name = "Lee";

console.log(MYAPP.name); // Lee

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

⭐️ 모듈 패턴

모듈 패턴은 클래스를 모방해서 관련이 있는 변수와 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈을 만든다. 이러한 모듈 패턴은 클로저기반으로 동작된다.
모듈 패턴의 가장 큰 특징은 전역 변수의 억제는 물론 캡술화까지 구현할 수 있다는 것이다.

⭐️ ES6 모듈

ES6 모듈을 사용하면 더는 전역 변수를 사용할 수 없다. ES6 모듈은 파일 자체의 독자적인 모듈 스코프를 제공한다. script 태그에 type="module" 어트리뷰트를 추가하면 로드된 자바스크립트 파일은 모듈로서 동작한다.

<script type="module" src="app.js"></script>