JavaScript のスコープとホイスティング - 包括的に説明

JavaScript のスコープ

JavaScript のスコープとは、特定の変数または関数を使用または表示できるコード内の領域を意味します。特定の値またはアクションにアクセスできる場所を定義します。 JavaScript には主に 2 種類のスコープがあります:

1. グローバルスコープ

2. ローカルスコープ (関数およびブロックスコープ)

グローバルスコープ

変数が関数またはブロックの外で宣言されると、その変数はグローバル スコープの一部になります。コード内のどこからでもアクセスできます。

let globalVar = "I'm global";

function printGlobalVar() {
  console.log(globalVar); // Accessible here
}

printGlobalVar(); // Output: I'm global
console.log(globalVar); // Output: I'm global

この例では、globalVar が関数の外で宣言されているため、グローバル変数になります。これは、関数の内部と外部の両方で、コード内のどこからでもアクセスできることを意味します。 printGlobalVar() 関数が呼び出されると、この関数はグローバル スコープにアクセスできるため、globalVar の値が記録されます。その後、関数の外側で globalVar を直接ログに記録しても、プログラム全体でグローバル変数として使用できるため、同じ値が出力されます。基本的に、グローバル スコープにより、コード内のどこからでもこの変数を使用およびアクセスできます。

ローカルスコープ (関数およびブロックスコープ)

関数またはブロック (ループや if ステートメントなど) 内で定義された変数は、その関数またはブロックに限定されます。そのスコープ外からはアクセスできません。

関数スコープ: 関数内で宣言された変数は、その関数内でのみアクセス可能です。

function myFunction() {
  let localVar = "I'm local";
  console.log(localVar); // Output: I'm local
}

myFunction();
console.log(localVar); // Error: localVar is not defined

ブロック スコープ: let と const で導入されたブロック スコープは、ループ、条件、try-catch ブロックなど、ブロック ({}) 内で宣言された変数に適用されます。これらの変数は、そのブロック内でのみアクセスできます。

if (true) {
  let blockVar = "I'm block scoped";
  console.log(blockVar); // Output: I'm block scoped
}

console.log(blockVar); // Error: blockVar is not defined

対照的に、var で宣言された変数は 関数スコープです。つまり、ブロック内で宣言されている場合でも、関数の先頭またはグローバルにホイストされます。

JavaScript でのホイスティング

ホイスティングは、コンパイル段階で宣言をその宣言を含むスコープの先頭に移動する JavaScript のデフォルトの動作です。これは、コードが実行される前に、変数と関数の宣言が処理されることを意味します。

変数の巻き上げ

var を使用した変数宣言の場合、変数はホイストされますが、初期化はホイストされません。これにより、初期化される前に変数にアクセスしようとすると、悪名高い「未定義」動作が発生します。

console.log(myVar); // Output: undefined
var myVar = "Hello";
console.log(myVar); // Output: Hello

JavaScript エンジンは舞台裏で次の処理を行います。

var myVar;
console.log(myVar); // Output: undefined
myVar = "Hello";
console.log(myVar); // Output: Hello

この例では、JavaScript が var myVar 宣言を先頭に巻き上げているため、コードは先頭に記述されているかのように動作します。最初の console.log は、変数が宣言 (ホイスト) されているものの、まだ値が割り当てられていないため、unknown を出力します。割り当ての後、2 番目の console.log は 5 を出力します。これは、巻き上げが var でどのように機能するかを示しています。つまり、宣言は巻き上げられますが、値は後で割り当てられます。

let と const の場合、宣言がホイストされている間、コードがその行に到達するまで初期化されず、宣言前にこれらにアクセスしようとすると ReferenceError が発生します。

console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization
let myLet = "Hello";

関数の巻き上げ

関数宣言は完全にホイストされます。つまり、宣言前に関数を呼び出すことができます。

greet(); // Output: Hello, World!

function greet() {
  console.log("Hello, World!");
}

関数は先頭に移動されているため、宣言前に呼び出すことができます。

ただし、var、let、または const を使用した 関数式 は、関数宣言と同じ方法ではホイストされません。これらはホイスティングに関しては通常の変数のように動作します。つまり、関数は代入後にのみ使用可能になります。

greet(); // Error: greet is not a function

var greet = function() {
  console.log("Hello!");
};

上記の例では、greet は var 変数としてホイストされていますが、最初は未定義であるため、割り当ての前にこれを呼び出そうとするとエラーが発生します。

実際の範囲と吊り上げ

• グローバル スコープ 変数は、スクリプト全体を通じてアクセスできます。

• ローカル スコープ 変数は、宣言されているブロックまたは関数に限定されます。

• ホイスティング を使用すると、宣言前に関数と変数を使用できますが、let、const、関数式には制限があります。

これらの概念は、JavaScript で変数や関数がどのように動作するかを理解するための基礎であり、明確でバグのないコードを作成するには、これらの概念を習得することが不可欠です。

以上がJavaScript のスコープとホイスティング - 包括的に説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。