JavaScript のスコープと語彙スコープをマスターする

JavaScript のスコープと語彙スコープ

スコープ と 字句スコープ を理解することは、効率的でエラーのない JavaScript コードを作成するための基礎です。これらの概念は、変数へのアクセス方法と、変数がコード内のどこで使用できるかを決定します。

---

1. JavaScript のスコープ

スコープ は、変数の可視性とアクセス可能性を決定する現在の実行コンテキストを指します。 JavaScript には 3 種類のスコープがあります:

A.ブロックスコープ

• let および const で宣言された変数はブロック スコープです。つまり、変数が定義されているブロック内でのみアクセス可能です。
• ES6 で導入されました。

例:

{
  let a = 10;
  const b = 20;
  console.log(a, b); // Output: 10, 20
}
console.log(a); // Error: a is not defined

B.関数のスコープ

• var で宣言された変数は関数スコープです。これらは、宣言されている関数全体内でアクセスできます。
• ブロック境界を尊重しません。

例:

function testFunctionScope() {
  if (true) {
    var x = 10; // Function-scoped
  }
  console.log(x); // Output: 10
}
testFunctionScope();

C.グローバルスコープ

• 関数またはブロックの外で宣言された変数はグローバル スコープ内にあり、プログラム内のどこからでもアクセスできます。

例:

var globalVar = "I am global";
console.log(globalVar); // Output: I am global

---

2.語彙範囲

字句スコープ は、変数のスコープがソース コード内の位置によって決定されることを意味します。関数は、呼び出し時ではなく定義時に設定されていたスコープ チェーンを使用して実行されます。

A.スコープチェーン

スコープ チェーンは、JavaScript が変数参照を解決するために使用するスコープの階層です。現在のスコープで変数が見つからない場合、変数は外側のスコープで検索され、グローバル スコープに到達するまで続けられます。

例:

function outer() {
  let outerVar = "I'm outer";

  function inner() {
    console.log(outerVar); // Accesses the outer scope
  }

  inner();
}
outer();
// Output: I'm outer

B.入れ子関数

内部関数は、字句スコープにより、外部関数の変数にアクセスできます。

例:

function outerFunction() {
  let outerVariable = "Outer";

  function innerFunction() {
    let innerVariable = "Inner";
    console.log(outerVariable); // Outer
    console.log(innerVariable); // Inner
  }

  innerFunction();
}
outerFunction();

---

3.実践例

A.アウタースコープ変数へのアクセス

function createMultiplier(multiplier) {
  return function (value) {
    return value * multiplier; // Accesses 'multiplier' from outer scope
  };
}

const double = createMultiplier(2);
console.log(double(5)); // Output: 10

B.クロージャ内の語彙スコープ

クロージャは、外部環境からの変数を記憶するために字句スコープに依存します。

例:

function outerFunction() {
  let count = 0;
  return function () {
    count++;
    console.log(count);
  };
}

const counter = outerFunction();
counter(); // Output: 1
counter(); // Output: 2

---

4. Scope に関するよくある間違い

A. let と const を忘れる

let、const、または var なしで宣言された変数はグローバル変数になります。

{
  let a = 10;
  const b = 20;
  console.log(a, b); // Output: 10, 20
}
console.log(a); // Error: a is not defined

B. var でスコープをブロックする

ブロック内で var を使用すると、予期しない結果が発生します。

function testFunctionScope() {
  if (true) {
    var x = 10; // Function-scoped
  }
  console.log(x); // Output: 10
}
testFunctionScope();

C.シャドーイング

ネストされたスコープで宣言された変数は、外側のスコープの変数をシャドウ (オーバーライド) できます。

var globalVar = "I am global";
console.log(globalVar); // Output: I am global

---

5.スコープとレキシカルスコープの違い

Scope	Lexical Scope
Refers to the context in which variables are accessible.	Refers to how the location of variables in the code determines scope.
Can be global, block, or function.	Depends on the structure of the code when it is written.
Dynamic during runtime.	Fixed during code definition.

スコープ

---

語彙範囲

変数にアクセスできるコンテキストを指します。 コード内の変数の位置がスコープを決定する方法を指します。 グローバル、ブロック、または関数にすることができます。 作成時のコードの構造によって異なります。 実行時に動的。 コード定義中に修正されました。

6.ベストプラクティス

let と const を使用します

function outer() {
  let outerVar = "I'm outer";

  function inner() {
    console.log(outerVar); // Accesses the outer scope
  }

  inner();
}
outer();
// Output: I'm outer

: 予期しないグローバル変数を避けるために、常に let と const を使用してください。

1. 
   

   グローバル変数の最小化
:
2. グローバル変数は名前の競合を引き起こす可能性があります。コードを関数またはモジュールにカプセル化します。

   
   

   語彙範囲を理解する
:

クロージャと字句スコープを利用して、よりクリーンで効率的なコードを作成します。

---

概要
• スコープは、グローバル、ブロック、関数の 3 つのタイプで変数にアクセスできる場所を定義します。
• 字句スコープ
は、関数が定義されたスコープを常に使用することを保証します。

これらの概念を習得することは、効果的な JavaScript コードをデバッグして作成するために重要です。

こんにちは、アバイ・シン・カタヤットです!

私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。 ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。

以上がJavaScript のスコープと語彙スコープをマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。