전역 변수를 임의로 사용하는 것은 위험합니다.
전역 변수를 사용해야 하는 특별한 이유가 없다면 지역 변수를 사용해야 합니다.
변수의 범위는 좁을수록 좋습니다.
즉각적인 기능
함수 정의와 동시에 호출되는 즉시 실행 함수는 한 번만 호출됩니다.
모든 코드를 인스턴트 함수로 래핑하면 모든 변수가 인스턴트 함수의 지역 변수가 됩니다.
이는 이러한 특성을 기반으로 전역 변수의 사용을 제한하는 한 가지 방법입니다.
(function (){
var foo = 10; // 즉시 실행 함수의 지역 변수
// ...
}());
console.log(foo); // ReferenceError: foo is not defined이 방법으로 전역 변수를 생성하지 않기 때문에 도서관 등에서 많이 사용된다.
네임스페이스 객체
네임스페이스로 사용할 전역 개체를 만들고 전역 변수와 같은 속성으로 사용하려는 변수를 추가하는 방법입니다.
var MYAPP = {}; // 전역 네임스페이스 객체
MYAPP.name="Lee";
console.log(MYAPP.name); // LeeNamespace 개체에 속성으로 다른 Namespace 개체를 추가하여 계층적으로 네임스페이스를 구성할 수도 있습니다.
var MYAPP = {}; // 전역 네임스페이스 객체
MYAPP.person = {
name: 'Lee',
address: 'Seoul'
};
console.log(MYAPP.person.name); // Lee네임스페이스를 분리하여 식별자 충돌을 방지하는 효과가 있지만 네임스페이스 객체 자체가 전역 변수에 할당되기 때문에 별로 유용하지 않은 것 같습니다.
모듈 패턴
모듈 패턴은 클래스를 모방하고 관련 변수와 함수를 수집합니다.
즉각적인 기능모듈을 만들려면.
모듈 패턴은 JavaScript의 강력한 기능인 클로저 위에서 작동합니다.
모듈 패턴은 전역 변수를 억제하는 것이 특징입니다.
캡슐화까지 구현할 수 있는
개체의 상태를 나타내는 속성과 속성을 참조하고 조작하는 작업인 메서드를 그룹화한 것입니다.
또한 개체의 내부 데이터 또는 메서드에 대한 직접적인 외부 액세스를 제한하는 것을 의미합니다.
캡슐화또한 정보 숨기기로 알려진 개체의 특정 속성이나 메서드를 숨기는 데 사용됩니다.
마찬가지로 모듈 패턴에서도 모듈의 내부 변수와 함수는 외부에 직접 노출되지 않고 모듈이 제공하는 인터페이스를 통해서만 상호 작용한다.
폐쇄에 대해 아직 들은 바가 없으므로 간단하게 설명하겠습니다.
Closures라는 함수를 통해 전역 변수를 억제할 수 있다는 점에 유의해야 합니다.
JavaScript는 public, private 및 protected와 같은 액세스 수정자를 제공하지 않습니다.
모듈 패턴은 전역 네임스페이스 오염을 방지하기 위해 제한적이지만 제한된 기능을 가지고 있습니다.
정보 숨기기를 구현하는 데 사용됩니다.
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위 코드의 즉시 함수는 객체를 반환합니다.
이 개체는 외부에 노출하려는 변수 또는 함수를 저장하고 반환합니다.
이때 반환되는 객체의 속성은 외부에 노출되는 public 멤버이다.
외부에 노출되고 싶지 않은 변수나 함수는 반환된 객체에 추가하지 않으면 외부에서 접근할 수 없는 private 요소가 됩니다.
ES6 모듈
이것은 더 이상 ES6 모듈의 경우가 아닙니다.
전역 변수는 사용할 수 없습니다.
ES6 모듈은 파일 자체의 사용자 정의 모듈 섹션을 제공합니다.
따라서 모듈 내에서 var 키워드로 선언된 변수는 더 이상 전역 변수가 아니며 위젯의 속성도 아닙니다.
최신 브라우저에서는 es6 모듈을 사용할 수 있습니다.
스크립트 태그에 type=”module” 특성을 추가하면 로드된 JavaScript 파일이 모듈처럼 작동합니다.
모듈의 파일 확장자는 mjs입니다.
<script type="module" src="http://dragon-it.m/lib.mjs"></script>
<script type="module" src="app.mjs"></script>ES6 모듈은 IE를 포함한 이전 브라우저에서 작동하지 않습니다.
브라우저의 ES6 모듈 기능을 사용하더라도 트랜스파일이나 번들링이 필요하므로 여전히
브라우저에서 지원하는 ES6 모듈 기능 대신 Webpack과 같은 모듈 번들러를 사용하는 것이 일반적입니다.