グローバル変数の問題

変数のライフサイクル

グローバル変数のライフサイクルは、最後の文が実行され、実行されなくなったときに解除されます.
ゾーン変数の場合、関数体の最後の文または戻り文は、実行時に解除されます.
グローバルオブジェクト
これは、

コードが実行される前にjsエンジンによって最初に生成された特殊なオブジェクトです.

ブラウザでは、ウィンドウサーバ側環境はグローバルオブジェクトを意味します.

標準バージョンのオブジェクト、環境内のホストオブジェクト、varキーワードとして宣言されたグローバル変数、およびグローバル関数を構成します.

グローバル変数の問題

無名の結合

これは、コードがどこでも参照および割り当てられることを意味します.
変数の有効範囲が大きいほど可読性が悪くなり、予期せぬ状態になる可能性があります.

ロングライフサイクル

グローバル変数のライフサイクルが長い.そのため、メモリリソースも長期的に消費されます.

スキャンチェーンの終点に存在する

これは、変数を検索すると、グローバル変数が最後に検索されることを意味します.

ネーミングスペース汚染

jsの最大の問題の1つは、ファイルが別々であってもグローバルスキャンを共有することです.
したがって、別のファイルのグローバル変数またはグローバル関数が同じ範囲に存在する場合、予想外の結果が発生する可能性があります.

グローバル変数を無効にする方法

グローバル変数を使用する必要がある理由が見つからない場合は、領域変数を使用します.変数のスキャンは狭いほど良い.

インスタント実行関数

すべてのコードをインスタント実行関数として監査すると、すべての変数がインスタント実行関数の領域変数になります.

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

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

ネーミングスペースを分離すると、識別子の競合を防止できますが、ネーミングスペースオブジェクト自体がグローバル変数に割り当てられるため、あまり役に立ちません.

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

モジュールモード

モジュールモードは,クラスを模倣し,関連する変数と関数を集合させ,即時実行関数で1つのモジュールに囲むモードである.

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

ES 6モジュール

ES 6モジュールは、ファイル自体の独立したモジュールスキャンを提供する.したがって、モジュール内でvarキーワードとして宣言された変数はグローバル変数ではなく、windowオブジェクトのpropertyではありません.

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

let constキーワードとブロックレベルスキャン

varキーワードで変数を宣言する問題

繰り返し宣言を許可する変数

:複数宣言可能、予知不可

関数レベルスキャン:for文などのコードブロックで宣言してもグローバル変数として宣言され、乱発を招きます.
変数反発:実行時より前に宣言し、宣言前に宣言に値を割り当てることができるため、予測できません.

letキーワード

特長

変数重複宣言禁止

ブロックレベルスキャン

変数反発:変数反発が発生するがvarとは異なる.宣言前にエラー

を参照

グローバルオブジェクト:letの場合、グローバル変数として宣言されてもウィンドウには追加されません.

constキーワード

特長

宣言と初期化を同時に行う必要があります.

再割当禁止(オブジェクトの値が変更されるため、変更なしとは異なり再割当のみ禁止)

定数

js変数ガイド

ES 6を使用する場合、varキーワード

は使用されません.
letキーは、

の再割り当てが必要な場合にのみ使用されます.この場合、変数のスキャンはできるだけ狭くなります.

は変更されず、読み取り専用の元の値とオブジェクトにはconstキーが使用されます.