グローバル変数の問題

グローバル変数

グローバル変数は、グローバルコードで宣言された変数です.
グローバル変数のライフサイクルは、アプリケーションのライフサイクルと同じです.cf)領域変数のライフサイクルは関数のライフサイクルと同じである.

var x = 'global'; // 전역 변수

function foo () {
	console.log(x); // 지역 변수 x의 호이스팅으로 인해 undefined 출력
	var x = 'local'; // 지역 변수
}

foo();
console.log(x); // global 출력

varキーワードとして宣言されたグローバル変数は、グローバルオブジェクトのプロパティになります.*varキーワードで宣言されるグローバル変数のライフサイクルは、「グローバルオブジェクト」のライフサイクルと同じです.

暗黙結合

「連結を抑制」を使用すると、すべてのコードがグローバル変数を参照および変更できます.
変数の有効範囲が大きいほど、コードの可読性が悪くなり、意外にステータスが変更される可能性があります.

ロングライフサイクル

グローバル変数は、ライフサイクルが長いため、メモリリソースを消費します.varキーワードとして宣言された変数では、再割り当てが許可されます.グローバル変数は、変数名が重複しているため、予期せぬ再割り当てが発生する可能性があります.

チェーンの末端に存在

グローバル変数は、スキャンチェーンの最末端に存在します.◇チェーンをスキャンして変数を検索する場合、グローバル変数の検索速度が最も遅い.

ネームスペース汚染

ファイルが分離されていても、JavaScriptはグローバルスキャンを共有します.◆他のファイルで同じ名前で宣言されたグローバル変数またはグローバル関数が同じscopeに存在する場合、予想外のエラーが発生する可能性があります.네임스페이스(Namespace):オブジェクトを区別できる範囲を示すネーミングスペース.1つのネーミングスペースでは、1つの名前が1つのオブジェクトのみを指します.

グローバル変数の使用を防止する方法

グローバル変数の盲目的な使用は非常に危険です!
グローバル変数を使用する必要がない限り、領域変数を使用する必要があります.変数のスキャンが小さいほどいいです!

インスタント実行関数

インスタント実行関数は1回のみ呼び出されます.
コードが即時実行関数に囲まれると、すべての変数が即時実行関数の領域変数になります.

(function () {
	var a = 1;
	// ...
}());

console.log(a); // ReferenceError

ネームスペースオブジェクト

ネームスペースオブジェクトを作成し、グローバル変数として使用する変数をPropertyに追加します.
ネーミングスペースを分離すると、識別子の競合を防止できますが、ネーミングスペースオブジェクト自体がグローバル変数に割り当てられます.

var NAMESPACE = {};
NAMESPACE.name = 'Sol';

console.log(NAMESPACE.name); // Sol 출력

// ---------------------------------------------

NAMESPACE.person = {
	name: 'Sol',
	age: 20
};

console.log(NAMESPACE.person.name); // Sol 출력

モジュールアレイ

クラスを模倣することにより,相関変数と関数を集合させ,即時実行関数で包み,모듈を生成する.
JavaScriptのモジュールモードは클로저に基づく.実装可能
JavaScriptではアクセス制限がないため、モジュールモードを使用して「情報の非表示」を実現します.

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

console.log(Counter.num); // undefined => num 변수는 외부로 노출되지 않음.
console.log(Counter.increase()); // 1
console.log(Counter.decrease()); // 0

ES 6モジュール

ES 6モジュールはファイル自体の独立したモジュールスキャンを提供するため、グローバル変数は使用できません.
➊ES 6モジュールは、変換またはバンドルが必要なため、実装ブラウザでは機能しないため、モジュールバンドルパッケージ(Webパッケージなど)が一般的に使用される.

Ref

[図書]李雄模、ファッションjavascript Deep Dive⌟、Wekibooks、2020