🔖

JavaScriptの == と === の違いを解説

に公開

はじめに

JavaScriptを学び始めると、===== という2つの「等しい」を意味する演算子が登場します。

一見すると同じように見えますが、挙動がまったく異なります。

本記事では、==(ゆるやかな比較)と ===(厳密な比較) の違いと、
混乱しやすいポイントを解説します。

1. ==:型を変換して比べる演算子(ゆるやかな比較)

1 == "1";          // true
true == 1;         // true
null == undefined; // true

== は、比較前に型を自動的に変換してから比較します。
このため、異なる型でも "意味的に等しければ" true になります。

✅ 一番混乱しやすいポイントです。

主な変換ルールの一例:

  • 数値と文字列 → 文字列を数値に変換して比較
  • true → 数値 1false → 数値 0
  • nullundefined は等しい(他の値とは等しくならない)
null == undefined    // true
null == 0            // false
undefined == false   // false

2. ===:型も値も同じかどうか比較(厳密な比較)

1 === "1";          // false
true === 1;         // false
null === undefined; // false

=== は、型変換を一切行わず、型と値の両方が等しいときだけ true を返します。

✅ JavaScriptでは === を使うのが一般的に推奨されている書き方です。

3. == の方が便利なケース

基本的には === を使うのが安全ですが、例外的に == が便利な場面もあります。

例:

if (value == null) {
  // null または undefined のときだけ処理したい
}

この書き方は value === null || value === undefined と同じ意味になります。
特定の目的で == を使うと簡潔に書ける場合もあります。

4. 比較まとめ表

結果 説明
1 == "1" true 型変換後に比較
1 === "1" false 型が異なるため false
true == 1 true true1 に変換される
true === 1 false 型が異なるため false
null == undefined true 特例として等しい
null === undefined false 型が異なるため false

おわりに

JavaScriptの ===== は、挙動の違いを理解していないとバグの原因になりやすい演算子です。

基本的には === を使うことで、予期せぬ型変換によるバグを防ぐことができます。

ぜひ今後のコードでは、意識的に === を使用してみてください。

本記事が参考になれば幸いです。

Discussion