JavaScript | == vs === の内部動作

JavaScript の ==（等価演算子） と ===（厳密等価演算子） は見た目が似ていますが、内部での動作がまったく違うのがポイントです。ここでは ECMAScript 仕様に基づいて、内部処理の流れを初心者にもわかりやすく解説します。

1. ===（厳密等価演算子）の内部動作

• 型変換を一切しない
• 型が違えば即座に false
• 型が同じなら、その型ごとのルールで比較

内部ルール

• 数値: 同じ数値なら true。ただし NaN === NaN は false。+0 === -0 は true。
• 文字列: 文字の並びが完全に一致すれば true。
• 真偽値: 両方が true または両方が false なら true。
• オブジェクト: 同じ参照（同じメモリ上のオブジェクト）なら true。
• null と undefined: どちらも同じ型ではないので false。

console.log(1 === 1);       // true
console.log("1" === 1);     // false（型が違う）
console.log(NaN === NaN);   // false（NaNは常に自分とも等しくない）
console.log(+0 === -0);     // true

console.log(1 === 1);       // true
console.log("1" === 1);     // false（型が違う）
console.log(NaN === NaN);   // false（NaNは常に自分とも等しくない）
console.log(+0 === -0);     // true

2. ==（等価演算子）の内部動作

• 型が違う場合、自動的に型変換（型強制 / type coercion）を行ってから比較
• この「暗黙の型変換」がややこしい挙動を生む

主な変換ルール

• 数値と文字列
  → 文字列を数値に変換して比較

console.log("5" == 5); // true（"5" → 5）

console.log("5" == 5); // true（"5" → 5）

• 真偽値と数値
  → true は 1、false は 0 に変換

console.log(true == 1);  // true
console.log(false == 0); // true

console.log(true == 1);  // true
console.log(false == 0); // true

• null と undefined
  → 特別ルールで null == undefined は true

console.log(null == undefined); // true
console.log(null == 0);         // false

console.log(null == undefined); // true
console.log(null == 0);         // false

• オブジェクトとプリミティブ
  → オブジェクトは valueOf() や toString() でプリミティブに変換してから比較

console.log([1,2].toString()); // "1,2"
console.log([1,2] == "1,2");   // true

console.log([1,2].toString()); // "1,2"
console.log([1,2] == "1,2");   // true

3. 代表的な「混乱しやすい例」

console.log(0 == false);        // true（false → 0）
console.log("" == 0);           // true（"" → 0）
console.log("0" == false);      // true（"0" → 0, false → 0）
console.log([] == false);       // true（[] → "" → 0, false → 0）
console.log([0] == false);      // true（[0] → "0" → 0, false → 0）
console.log([1] == true);       // true（[1] → "1" → 1, true → 1）

console.log(0 == false);        // true（false → 0）
console.log("" == 0);           // true（"" → 0）
console.log("0" == false);      // true（"0" → 0, false → 0）
console.log([] == false);       // true（[] → "" → 0, false → 0）
console.log([0] == false);      // true（[0] → "0" → 0, false → 0）
console.log([1] == true);       // true（[1] → "1" → 1, true → 1）

4. まとめ表

✅ 結論

• === を基本的に使うべき：予期せぬ型変換を避けられる
• == を使うのは例外的に便利な場合のみ
  例: if (value == null) → null または undefined の両方をまとめて判定できる

== の落とし穴クイズ

1. "5" == 5
   • 結果: true
   • 理由: 文字列 "5" が数値 5 に変換されて比較される。
2. null == undefined
   • 結果: true
   • 理由: 仕様で特別に「等しい」と定義されている。
3. 0 == false
   • 結果: true
   • 理由: false が数値 0 に変換される。
4. [] == false
   • 結果: true
   • 理由: 空配列 [] → ""（空文字列） → 数値 0、false も 0 になる。
5. "0" == false
   • 結果: true
   • 理由: "0" → 数値 0、false → 0。両方 0 なので等しい。

ポイントまとめ

• == は「暗黙の型変換」が入るため、直感と違う結果が出やすい。
• === を使えば型変換が行われないので、予期せぬ挙動を避けられる。

== vs === 実践クイズ

1. "5" == 5 と "5" === 5 の結果は？
   • == → true
   • === → false
   • 理由: == は型変換して比較、=== は型が違うので false。

2. 0 == false と 0 === false の結果は？
   • == → true
   • === → false
   • 理由: false が数値 0 に変換されるのは == のときだけ。

3. null == undefined と null === undefined の結果は？
   • == → true
   • === → false
   • 理由: == では特別ルールで等しいとされるが、型が違うので === は false。

4. [1] == "1" と [1] === "1" の結果は？
   • == → true
   • === → false
   • 理由: 配列 [1] が "1" に変換されるため == では等しいが、型が違うので === は false。

5. NaN == NaN と NaN === NaN の結果は？
   • == → false
   • === → false
   • 理由: NaN は「自分自身とも等しくない」という特別ルール。

まとめ

• == は「型変換あり」なので直感と違う結果が出やすい。
• === は「型も値も同じか」を厳密にチェックするので、基本はこちらを使うのが安全。