JavaScript ホイスティングを理解する: 簡単なガイド

JavaScript を初めて使用する場合は、変数が未定義であるように見えたり、ReferenceError などのエラーが予期せずポップアップしたりする、混乱を招く状況に遭遇したことがあるかもしれません。多くの場合、これはホイスティングとして知られる概念に遡ることができます。しかし、ホイスティングとは何でしょうか?コードにどのような影響を与えるのでしょうか?

このガイドでは、ホイスティングの概念とそれが JavaScript でどのように機能するかを詳しく説明します。最後までに、吊り上げがなぜ起こるのか、そしてよくある間違いを避ける方法を理解できるようになります。

ホイスティングとは?
ホイスティングは、コードの実行前に変数および関数の宣言をスコープの先頭に移動する JavaScript の動作です。これは、コードが実際に実行される前の準備段階で宣言 (割り当てではなく) が処理されることを意味します。

JavaScript は最初に作成フェーズを経て、変数と関数にメモリを割り当てます。ただし、関数と変数の処理方法は少し異なります。

関数ホイスティング: 完全にホイストされた定義
function キーワードを使用して宣言された関数は、完全な定義でホイストされます。これにより、コード内で実際に宣言する前に関数を呼び出したり使用したりすることができます。

例:

sum(5, 3); // Output: 8

function sum(a, b) {
  console.log(a + b);
}

sum() 関数はコード内で宣言される前に呼び出されますが、作成フェーズ中に関数宣言がスコープの先頭に引き上げられるため、完全に機能します。

変数の巻き上げ: var、let、const
変数の巻き上げは関数の巻き上げとは異なる動作をし、var、let、または const のいずれを使用するかによって異なります。

1. var 宣言
var を使用して変数を宣言すると、その変数はデフォルト値の unknown でスコープの先頭にホイストされます。これは、宣言前でも変数にアクセスできますが、変数に値を代入するまでは変数は未定義のままであることを意味します。

console.log(city); // Output: undefined
var city = "New York";
console.log(city); // Output: "New York"

この例では、city は初期値 undefine でホイストされます。値「New York」が割り当てられると、2 番目の console.log() は「New York」を正しく出力します。

2. let および const 宣言
let と const を使用すると、変数もホイストされますが、初期化されないままになります。これは、宣言前にアクセスしようとすると ReferenceError が発生することを意味します。

console.log(name); // ReferenceError: Cannot access 'name' before initialization
let name = "John Doe";

このエラーは、let 変数と const 変数が、スコープの開始点と実際に宣言されるポイントの間の時間的デッド ゾーン (TDZ) と呼ばれる場所に存在するために発生します。この間、変数を参照することはできません。

let と const の主な違い
let と const はどちらもホイストという点では同様に動作しますが、const では宣言時に値を割り当てる必要があるのに対し、let ではすぐに値を割り当てずに変数を宣言できます。

const name = "John Doe"; // Must be initialized
let age; // Can be declared without assignment

吊り上げ練習
関数と変数の両方のホイスティングの動作を示す例を見てみましょう:

console.log(city); // Output: undefined
sum(3, 4);    // Output: 7

function sum(x, y) {
  console.log(x + y);
}

var city = "New York";
console.log(city); // Output: "New York"

ここでは、sum 関数が完全な定義でホイストされているため、関数が宣言される前に呼び出すことができます。ただし、都市は unfine の値でホイストされます。これが、最初の console.log() が unknown を出力する理由の説明になります。割り当てが行われると、2 番目の console.log() は正しい値を出力します。

ホイスティングの落とし穴を避けるためのヒント
吊り上げによって発生する問題を回避するには、次のベスト プラクティスに従ってください。

1. - 宣言前に変数にアクセスしないようにするには、var の代わりに let と const を使用します。
2. - コードが予測どおりに動作するように、スコープの先頭で変数と関数を宣言します。

キーホイスティングの概念の要約

• ホイスティングとは、コードの実行前に宣言をスコープの先頭に移動する JavaScript の動作を指します。
• function で宣言された関数は完全な定義とともにホイストされ、宣言される前に使用できるようになります。
• var で宣言された変数は、デフォルト値の未定義でホイストされますが、let と const で宣言された変数は初期化されないため、宣言前にアクセスすると ReferenceError が発生します。
• Temporal Dead Zone (TDZ) は let と const に適用され、初期化される前にアクセスされるのを防ぎます。

ホイスティングを理解することで、JavaScript でよくある問題を回避し、より予測可能なコードを作成できます。練習すれば、これらの概念が自然になるでしょう。

以上がJavaScript ホイスティングを理解する: 簡単なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。