🔖
JavaScriptの == と === の違いを解説
はじめに
JavaScriptを学び始めると、== と === という2つの「等しい」を意味する演算子が登場します。
一見すると同じように見えますが、挙動がまったく異なります。
本記事では、==(ゆるやかな比較)と ===(厳密な比較) の違いと、
混乱しやすいポイントを解説します。
1. ==:型を変換して比べる演算子(ゆるやかな比較)
1 == "1"; // true
true == 1; // true
null == undefined; // true
== は、比較前に型を自動的に変換してから比較します。
このため、異なる型でも "意味的に等しければ" true になります。
✅ 一番混乱しやすいポイントです。
主な変換ルールの一例:
- 数値と文字列 → 文字列を数値に変換して比較
-
true→ 数値1、false→ 数値0 -
nullとundefinedは等しい(他の値とは等しくならない)
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 |
true は 1 に変換される |
true === 1 |
false | 型が異なるため false |
null == undefined |
true | 特例として等しい |
null === undefined |
false | 型が異なるため false |
おわりに
JavaScriptの == と === は、挙動の違いを理解していないとバグの原因になりやすい演算子です。
基本的には === を使うことで、予期せぬ型変換によるバグを防ぐことができます。
ぜひ今後のコードでは、意識的に === を使用してみてください。
本記事が参考になれば幸いです。
Discussion