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"

この例では、最初は undefend の値で city がホイストされます。値「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 が発生します。
• 一時的デッド ゾーン (TDZ) は let と const に適用され、初期化される前にアクセスされるのを防ぎます。

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