JavaScriptのスコープ

導入
範囲:多分、あなたはJackまたはStackOverflowの上でポストについて記事を読んでいるとき、100回の語を読みます.

But what does scope actually means in JavaScript and how scopes are managed?

以下の節でこれに入りましょう.

スコープとは
我々のプログラムは州です.これがなければ、正直なところ、我々のコードは操作を実行したり、いくつかのAPI呼び出しをしたり、物事を計算したりするでしょう.しかし、これらの結果をどこかに格納したい場合は、変数が必要です.
後でこれらの変数を検索、更新することができますし、アプリケーションを構築するより強力な方法を有効にします.しかし、どのようにアクセスすることができますどのような変数にアクセスするときにコードが実行されている場合は?
これらの質問は、変数へのアクセスを管理する規則のよく定義されたセットで答えられる必要があります.

The scope is a set of rules that manage the accessibility of variables.

スコープの種類
小さな部分に分けることができるスコープの2つの主要なタイプがあります.

グローバルスコープ

ローカルスコープ

グローバルスコープ
グローバルスコープは、既存のスコープの最も外側のスコープです.グローバルスコープで作成された変数は、スコープ内でアクセスできます.
グローバルスコープで宣言された変数はグローバル変数と呼ばれます.しかし、グローバルスコープを変数で汚染するのは良い考えではありません.
コードのどんなブロックもグローバル変数セットにアクセスするので、衝突は偶然にそのグローバル変数に格納された値を上書きするか、またはアップデートするかもしれない簡単に起こります.
この問題を回避するために、これらの場合に役立つローカルスコープを紹介します.

ローカルスコープ
どんな種類のブロックの中ででも宣言された変数と定数はいくぶんローカルスコープで、地球環境を汚染しません.
これらは{ }括弧で作成することができますが、スリップを理解する機会を与えないでください.
次のセクションでは、ローカルスコープの種類を参照します.

関数スコープ- var & let & const

Create scope for var, let and const

あなたの変数のスコープを作成する方法について考える場合は、おそらくあなたの心に機能が便利になることができます.
JavaScriptの関数は、関数スコープと呼ばれる新しいスコープを作成します.
機能スコープのもう一つの便利なツールはクロージャですが、別のポストにとって良いテーマです.
より良い理解のための例

function _fscope() {
  let a = 1;
  console.log(a); // outputs: 1
}
console.log(a); // ReferenceError: a is not defined

globalThis.a // evaluates to undefined

ご覧のように、簡単な関数宣言で宣言された変数のスコープを作成します.そのスコープの外にある変数にアクセスできません.
安IIFE 基本関数宣言と同様にスコープを作成します.

ブロック・スコープ

Create scope for let and const

ブロックスコープは、実際には{}カーリーブレースまたは別の方法でスコープとして記述することができます:JavaScriptブロックのコードは、変数のスコープを定義します.
次の例では、その動作を簡単に表示できます.

{
  let q = 123;
  console.log(q); // 123
}
console.log(q); // ReferenceError: q is not defined

globalThis.q // evaluates to undefined

これは本当に簡単な例です.次のブロックは、変数のブロックスコープを作成します.

ループ

条件文'本文'

単純な{ブロック

巣の巣
スコープは入れ子にすることができます.これは「内部」スコープのいずれかがグローバルオブジェクトまでのスコープスコープにアクセスできます.または、ステートメントのもう一方の端から始めると、'外部'スコープのどれも'内部'スコープにアクセスできません.それは例を叫ぶ!

const global = '2021';
(function() {
    let outer = 123;
  if (outer) {
    const inner = 'inner';
    console.log(global, inner, outer); // '2021' 'inner' 123
  };
    console.log(global, inner, outer); // ReferenceError: inner is not defined
})();

上の例で見ることができるように、入れ子になったスコープはすべてのスコープにアクセスできますが、スコープは内部のアクセスにアクセスできません.

モジュールスコープ
ES 2015、または多分あなたはES 6の導入モジュールとして知られている.モジュールは単純です.ジェイ.MJSファイル.モジュールがCommonJSモジュールかES 6モジュールであるかは問題ではありません.

関数

クラス

変数

したがって、モジュールの上記のメンバーのうちの1つを輸出しない限り、あなたがそのモジュールを輸入しても、それはもう一つのモジュールで利用できません.それは良い分離メカニズムです.

+ 1 : var
上記のように、関数スコープだけがVARで作成された変数をカプセル化できます.
VARがグローバルスコープで変数を作成するかどうかを議論することもあります.この部分のOS JavaScriptを再訪問しましょう.

Creating variables with var not creates variable on the global scope.

varで作成された変数は関数スコープで、以下のように出力されます.

(function (){
    var q = 3;
})();
console.log(globalThis.q);
*undefined*

しかし、以下のような良いものを出力します

if(true) {
  let a = 3;
  var b = 2;
}
console.log(globalThis.a); // undefined
console.log(globalThis.b); // 2 - oops :( 

私の推薦:VARを使用するための非常に非常に強い理由がある以外はどこでもletを使用しようとします.
関連記事は公式に見つかりますDocs

結論
スコープを理解するのはJavaScriptの長い学習パスの重要な部分ですが、確実にデバッグ時間を減らして、JSコードがどのように働くかについてよりよく理解するのを助けることができます.
私は私の記事を楽しんでください、下記のあなたのコメントを加えてください
カバー画像Unsplash