キーワード var は、長年にわたって JavaScript で変数を宣言するデフォルトの方法でした。ただし、コード内で予期しない動作を引き起こす可能性のあるいくつかの癖や落とし穴があります。 let や const のような最新の代替手段は、これらの問題の多くを解決するため、ほとんどの場合、変数を宣言するための好ましい選択肢となっています。

1️⃣ 巻き上げ: var がいつの間にか変数を宣言している!

?説明：

JavaScript では、var 宣言はスコープの先頭に巻き上げられます。つまり、宣言がコードの後半にある場合でも、未定義として初期化されます。これにより、混乱を招く動作が発生し、検出が難しいバグが発生する可能性があります。

?キーポイント:

• ? 動作中のホイスト: 変数宣言はスコープの先頭に移動されますが、その割り当ては移動されません。
• ? 予期しない未定義の値: 値が割り当てられる前に変数を使用すると、意図しない未定義の結果が生じる可能性があります。

?例：

console.log(myVar);  // undefined (hoisted but not initialized)
var myVar = 10;
console.log(myVar);  // 10

?コメント: 変数 myVar はスコープの先頭にホイストされますが、最初は未定義であるため、コード内で混乱が生じる可能性があります。

?修理：

• ? let または const を使用します: これらのキーワードは var と同じ方法ではホイストされないため、この問題を防ぐことができます。

?修正例:

console.log(myLet);  // ReferenceError: myLet is not defined
let myLet = 10;
console.log(myLet);  // 10

?コメント: let を使用すると、宣言される前に変数にアクセスできなくなり、混乱や潜在的なバグが軽減されます。

2️⃣ 関数スコープとブロック スコープ: var はブロックから漏洩する可能性があります!

?説明：

var の大きな欠点の 1 つは、var がブロック スコープではなく関数スコープであることです。これは、ループ内で宣言された変数、if ステートメント、または他のブロックがそのブロックに限定されず、そのブロックの外からアクセスできることを意味し、バグにつながる可能性があります。

?キーポイント:

• ? 関数スコープ: var は、ループや if ステートメントのようにブロック内で宣言されている場合でも、最も近い関数にスコープされます。
• ? 変数の漏洩: これにより、変数がブロックから意図せず漏洩し、予測不可能な動作が引き起こされる可能性があります。

?例：

if (true) {
  var blockVar = "I’m accessible outside this block";
}
console.log(blockVar);  // "I’m accessible outside this block"

?コメント: blockVar は if ブロック内で宣言されていますが、var はブロック スコープではなく関数スコープであるため、ブロックの外からもアクセスできます。

?修理：

• ? let または const: を使用します。これらのキーワードはブロック スコープです。つまり、キーワードが定義されているブロック内でのみアクセス可能です。

?修正例:

if (true) {
  let blockLet = "I’m only accessible inside this block";
}
console.log(blockLet);  // ReferenceError: blockLet is not defined

?コメント: let または const を使用すると、変数がそれぞれのブロックに限定されたままになり、スコープのリークが防止されます。

3️⃣ 再宣言の問題: var では同じ変数を 2 回宣言できます!

?説明：

var を使用すると、同じスコープ内で同じ変数を誤って再宣言し、以前の値が上書きされる可能性があります。これは、特に変数名が誤って再利用される可能性のある大規模なコードベースで、意図しないバグにつながる可能性があります。

?キーポイント:

• ? 変数の再宣言: var を使用すると、同じスコープ内で変数を再宣言でき、既存の値が上書きされる可能性があります。
• ? 意図しない上書き: これにより、特に大規模な関数または複雑な関数で、検出が困難なバグが発生する可能性があります。

?例：

var name = "Alice";
var name = "Bob";  // No error, overwrites the previous value
console.log(name);  // "Bob"

?コメント: name の 2 番目の宣言は最初の宣言を上書きするため、コードにバグが発生する可能性があります。

?修理：

• ? let または const を使用します: これらのキーワードを使用すると、同じスコープ内で変数を再宣言することができなくなり、意図しない上書きのリスクが軽減されます。

?修正例:

let name = "Alice";
let name = "Bob";  // SyntaxError: Identifier 'name' has already been declared

?コメント: let または const を使用すると、変数の再宣言を回避し、コードが予測可能であることが保証されます。

ループ内の 4️⃣ var: 非同期コードにバグの可能性

?説明：

ループ内で var を使用すると、特に非同期コードを操作する場合に、変数の値が予期しない方法で変化する可能性があります。 var はブロック スコープではなく関数スコープであるため、ループ変数は非同期コールバック内でアクセスされると予期しない値を保持する可能性があります。

?キーポイント:

• ? ループ変数: ループ内で var で宣言された変数はループ ブロックに限定されないため、後でアクセスすると潜在的なバグが発生します。
• ⏳ 非同期の問題: これにより、setTimeout や Promise などの非同期操作でバグが発生する可能性があり、ループ変数に予期しない値が含まれる可能性があります。

?例：

for (var i = 0; i  console.log(i), 1000);  // Prints: 3, 3, 3 (unexpected)
}

?コメント: var はブロック スコープではないため、ループ変数 i はすべての反復で共有され、その最終値 (3) が各 setTimeout コールバックで使用されます。

?修理：

• ⛓ let を使用: let キーワードはブロック スコープであり、ループの各反復がループ変数の独自の独立した値を取得するようにします。

?修正例:

for (let i = 0; i  console.log(i), 1000);  // Prints: 0, 1, 2 (as expected)
}

?コメント: let を使用すると、反復ごとに i の新しいインスタンスが作成され、非同期コールバックの問題が修正され、正しい値が確実に出力されます。

5️⃣ var とクロージャ: 混乱の原因

?説明：

クロージャを var と組み合わせると、予期しない動作が発生する可能性があります。 var は関数スコープであるため、クロージャがそれをキャプチャすると、その値が予期しない方法で変化する可能性があります。

?キーポイント:

• ? JavaScript のクロージャ: クロージャは、外側の関数の実行が終了した後でも周囲のスコープを記憶する関数です。
• ? 共有変数の問題: var がクロージャ内で使用される場合、キャプチャされた変数がすべてのクロージャ間で共有される可能性があり、予期しない動作が発生します。

?例：

function createFunctions() {
  var funcs = [];
  for (var i = 0; i 



?コメント: var が関数スコープであるため、すべてのクロージャが同じ i 値をキャプチャしており、予期しない結果が発生します。

?修理：

• ? let を使用します: let を使用すると、各クロージャがループ変数の新しいインスタンスをキャプチャし、問題を解決します。

?修正例:

function createFunctions() {
  var funcs = [];
  for (let i = 0; i 



?コメント: let を使用すると、各クロージャは i の独自のコピーを取得し、問題を修正し、期待される値が確実に出力されるようにします。



  
  
  ?結論: var に別れを告げる時が来た


var は JavaScript で変数を宣言するための元の方法でしたが、いくつかの欠点があり、最新の JavaScript 開発では不適切な選択肢となっています。 let と const の導入により、より適切なスコープが提供され、バグのリスクが軽減され、コードがより予測可能になります。よりクリーンで保守しやすい JavaScript を作成するには、var から離れて let と const を採用する時期が来ました。