JavaScript は、初心者が混乱する可能性のある動作をすることが多い言語です。そのような動作の 1 つは ホイスティング です。これは、すべての JavaScript 開発者がより予測可能なコードを作成するために理解する必要がある概念です。この記事では、ホイスティングとは何か、ホイスティングが変数や関数でどのように機能するか、ホイスティングに関連する落とし穴を回避する方法について説明します。

ホイスティングとは?

ホイスティングとは、宣言 (初期化ではない) をスコープの先頭に移動する JavaScript のデフォルトの動作を指します。これは、コードが実行される前のコンパイル段階で発生します。これは、コード内で実際に宣言される前に、変数や関数を使用できることを意味します。

例：

console.log(myVar); // undefined
var myVar = 5;

この例では、myVar が宣言される前に使用されているため、ReferenceError が発生することが予想されます。ただし、巻き上げにより、実際に起こることは、宣言 var myVar がそのスコープの先頭に移動される一方で、割り当て (myVar = 5) はそのまま残ります。内部的には、JavaScript は次のように解釈します:

var myVar;
console.log(myVar); // undefined
myVar = 5;

このため、myVar は定義されていますが、console.log の実行時にはまだ割り当てられていないため、unknown が出力されます。

ホイストと変数

さまざまなタイプの変数 (var、let、const) を使用してホイスティングがどのように機能するかを詳しく見てみましょう。

1. var ホイスティング

var を使用すると、宣言と変数の両方がホイストされます。ただし、移動されるのは宣言のみであり、割り当ては移動されません。

console.log(a); // undefined
var a = 10;

宣言変数 a はホイストされますが、代入は後で行われるため、ログに記録された時点では a は未定義です。

2. let と const ホイスティング

let や const で宣言された変数もホイストされますが、var のように未定義に初期化されません。代わりに、スコープの開始から宣言が検出されるまで、時間的デッド ゾーン (TDZ) に入ります。

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;

ここでは b が巻き上げられていますが、実際の宣言行が実行されるまで使用できないため、ReferenceError が発生します。

同じ動作が const にも適用されますが、const 変数は宣言時に初期化する必要があるという追加のルールが適用されます。

巻き上げと機能

関数宣言は完全にホイストされます。つまり、関数名と本体の両方がスコープの先頭に移動されます。これにより、関数が宣言される前に関数を呼び出すことができます。

関数宣言例:

greet(); // "Hello, World!"

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

ここでは、関数宣言の挨拶が完全にホイストされているため、コードがその定義に到達する前でも関数を呼び出すことができます。

関数式とホイスティング

関数式は同じ方法でホイストされません。これらは代入として扱われるため、変数宣言のみがホイストされ、関数定義はホイストされません。

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

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

この場合、変数greetは巻き上げられますが、巻き上げプロセス中に未定義が割り当てられます。そのため、代入の前にgreet()を呼び出すとTypeError.

巻き上げの落とし穴を避ける

吊り上げによる混乱を避けるために、次のベスト プラクティスに従ってください:

1. スコープの先頭で変数を宣言する – ホイスティングにより宣言が先頭に移動しますが、それぞれのスコープの先頭で変数を宣言することをお勧めします。これにより、コードがより読みやすく、予測しやすくなります。

2. var の代わりに let と const を使用する – let と const で宣言された変数はブロック スコープであるため、ホイスティング動作がより明確になり、バグが発生しにくくなります。また、初期化前に誤って変数を参照してしまう可能性も低くなります。

3. 関数宣言を整理する – ホイスティング動作に依存しないように、使用する前に関数を宣言します。

結論

ホイスティングは JavaScript の多くの特徴の 1 つですが、その仕組みを理解すると、よりクリーンでエラーが発生しにくいコードを作成するのに役立ちます。関数宣言と変数は両方ともホイストされますが、動作が異なることに注意してください。 var ではなく let と const を使用し、予期せぬ事態を避けるためにコードをよく整理してください。

ホイストに注意することで、JavaScript コードをより予測しやすく、保守しやすくなります。