javascript変数スコープと巻き上げを分類します

JavaScript変数スコープと巻き上げの理解：包括的なガイド

プログラミングの礎石である可変スコープは、プログラム内の変数のアクセシビリティを決定します。 このガイドは、変動する宣言方法、グローバル対ローカルスコープ、およびしばしば驚くべき巻き上げの概念をカバーするJavaScriptのスコーピングメカニズムを掘り下げます。これらの概念を習得することは、堅牢でエラーのないJavaScriptアプリケーションを構築するために重要です。

重要な概念：

JavaScriptは、グローバルとローカルの2つの主要な範囲タイプを採用しています。ローカルスコープは、さらに機能スコープ（

の場合）およびブロックスコープ（
• およびvar）に細分化されます。 letconst宣言は関数の上部に巻き上げられ、
と
• はブロックの上部に巻き上げられますが、「時間的なデッドゾーン」を作成します。 プログラム全体でアクセス可能なグローバル変数は、潜在的な競合と偶発的な上書きのために一般的に落胆します。 var関数宣言は完全に巻かれており、標準の巻き上げルールに付着する関数式とは異なり、定義の前に呼び出しを有効にします。 letJavaScriptのスコーピングおよび巻き上げルールの適切な理解と適用は、一般的な変数関連のバグを防ぎ、コードの信頼性を高めます。 const
• 可変スコープ詳細：
JavaScriptの変数の範囲は、宣言の場所によって決定され、プログラム内のアクセシビリティを定義します。 変数宣言には3つの方法が存在します：レガシー
• キーワードと最新の
および

キーワード。 一方、

は唯一のオプションでしたが、ES6以前、、はより厳格なルールを提供し、コードの信頼性を向上させます。

JavaScriptには、グローバルとローカルの2つの主要なスコープがあります。ローカルスコープは、さらに関数スコープ（

の場合）およびブロックスコープ（varおよびletの場合）に分岐します。 関数スコープは、ブロックスコープの特殊な形式です constvarグローバルスコープ：letconst

スクリプト内の最も外側のスコープは、グローバルスコープです。ここで宣言された変数はグローバルになり、プログラムのどこからでもアクセス可能になります：

var let便利ですが、潜在的な競合と上書きにより、一般的にグローバル変数は落胆します。 const

ローカルスコープ：

ブロック内で宣言された変数（例えば、、

、関数）は、そのブロックのローカルです。 関数は、

、

、および

<code class="language-javascript">// Global Scope
const name = "Monique";

function sayHi() {
  console.log(`Hi ${name}`);
}

sayHi(); // Hi Monique</code>

で宣言された変数の範囲を定義します。 コードブロックは、

および

のスコープのみを定義します。

は関数スコープに制限されています

letおよびconstブロックスコープを導入し、各ブロックの新しいローカルスコープを作成します。スタンドアロンブロックは、スコープも定義します：

<code class="language-javascript">// Global Scope
const name = "Monique";

function sayHi() {
  console.log(`Hi ${name}`);
}

sayHi(); // Hi Monique</code>

ネストされたスコープが可能であり、内側のスコープは外側のスコープからの変数にアクセスしますが、その逆ではありません。

スコープの視覚的メタファー：

世界を想像してみてください。国には国境（スコープ）があり、国内の都市には独自のスコープなどがあります。 グローバルな範囲は、すべてを網羅する世界の海のようなものです。 この類推は、スコープの仕組みを示しています。変数の検索は、最も内側のスコープで始まり、発見されるかエラーが発生するまで外側に進みます。このルックアップは、語彙（静的）スコーピングと呼ばれます

巻き上げ：

JavaScriptの「ホイスト」メカニズムは、コンピレーション中に変数と関数宣言をスコープの上部に移動します。 ただし、宣言のみが巻かれています。割り当てはそのまま残っています。 これを考えてみてください：

出力は

<code class="language-javascript">{
  // standalone block scope
}</code>

undefinedが宣言されているが、まだ割り当てられていないためです。 エンジンはそれを次のように解釈します：state

<code class="language-javascript">console.log(state); // undefined
var state = "ready";</code>

およびlet変数も巻き上げられますが、初期化されていないため、宣言の前に「時間的デッドゾーン」（TDZ）が生じます。 TDZ内でそれらにアクセスすると、a const。ReferenceError

関数と巻き上げ：

関数宣言は完全に巻かれており、定義の前に通話を許可します。

ただし、関数式は、標準の巻き上げルールに従います（宣言が掲げられ、割り当てが残ります）。 クラスは、

変数と同様に動作します。

<code class="language-javascript">var state; // hoisted
console.log(state);
state = "ready";</code>

let主要な違いとベストプラクティス：

：function-scoped。

• varおよび
：block-scoped。
• letすべての宣言は巻かれています。const
関数は変数の前に巻き上げられます。
関数宣言は、変動宣言よりも優先されますが、割り当てではありません。
• よくある質問：

• 可変スコープとは？変数がアクセス可能な領域。
• グローバルvs.ローカルスコープ？グローバル：どこでもアクセスできます。ローカル：ブロックまたは関数に制限されています。
• ブロックスコープ？ブロックで定義されたローカルスコープ（およびletを使用）。 const
ホイストはどのように機能しますか？
• 宣言は範囲の最上部に移動されます。
宣言と巻き上げの初期化？
• 宣言は巻き上げられており、初期化は残っています。
and
• ？ ​​hoistedで巻き上げられますが、初期化されていません。 TDZが適用されます let JavaScriptのスコーピングと巻き上げを理解することにより、開発者はよりクリーナー、より予測可能で、エラーが発生しやすいコードを書き込むことができます。 コードの組織と保守性を向上させるために、ブロックスコープ（constおよび）を活用することを忘れないでください。

以上がjavascript変数スコープと巻き上げを分類しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。