JavaScript の == と === の違いを理解する
JavaScript の等価演算子 == と厳密等価演算子 === の違いを、型変換のしくみと具体例とともに初心者向けに解説します。
はじめに
JavaScript で値を比較するときに使う == と === には、明確な違いがあります。
この違いを理解していないと、思わぬバグの原因になることがあります。
この記事を読むと、次のことが分かるようになります。
==と===の動作の違い- それぞれの演算子が内部でどのように比較を行っているか
- 実務でどちらを使うべきか
- 初心者が陥りやすい落とし穴
前提条件
- JavaScript の基本的な構文（変数宣言、データ型）を理解していること
boolean型、number型、string型などの基本的な型を知っていること
公式ドキュメント
結論
まず結論からお伝えします。
| 演算子 | 名称 | 型変換 | 推奨度 |
|---|---|---|---|
== | 等価演算子 | あり | 非推奨 |
=== | 厳密等価演算子 | なし | 推奨 |
基本的には === を使ってください。
理由は主に 2 つあります。
- 型変換による予期しない挙動を防げる —
==の型変換ルールは複雑で、結果を覚えるのが難しい - コードの意図が明確になる — 「型も含めて完全に一致する場合のみ」という意図が明確に伝わる
唯一の例外として、null と undefined の両方をまとめてチェックしたい場合に == を使うイディオムがあります。
詳細は記事後半で紹介します。
== （等価演算子）とは
== は 等価演算子（loose equality） と呼ばれ、2 つの値が等しいかどうかを比較します。
特徴は、比較する前に型を自動的に変換する点です。
この自動変換のしくみを 型強制（type coercion） と呼び、異なる型同士でも比較できるように設計されています。
ただし変換ルールが複雑で、直感に反する結果になることが多くあります。
基本的な動作
同じ型の値を比較する場合、== は === と同じように動作します。
// 同じ型の比較 console.log(1 == 1); // true console.log("hello" == "hello"); // true console.log(true == true); // true
異なる型を比較した場合
== で異なる型の値を比較すると、JavaScript は片方の値をもう片方の型に変換してから比較します。
// 文字列と数値を比較 console.log("1" == 1); // true（文字列 "1" が数値 1 に変換される） // 数値と真偽値を比較 console.log(0 == false); // true（false が 0 に変換される） console.log(1 == true); // true（true が 1 に変換される） // null と undefined の比較 console.log(null == undefined); // true（null と undefined は等価とみなされる）
=== （厳密等価演算子）とは
=== は 厳密等価演算子（strict equality） と呼ばれ、== と違って型変換を一切行いません。
型と値の両方が一致した場合のみ true を返します。
型変換がないため挙動が予測しやすく、意図しないバグを防ぎやすいのが特徴です。
基本的な動作
// 同じ型・同じ値の場合 console.log(1 === 1); // true console.log("hello" === "hello"); // true console.log(true === true); // true
異なる型の場合は必ず false
// 型が異なる場合は必ず false console.log("1" === 1); // false（string と number は別の型） console.log(0 === false); // false（number と boolean は別の型） console.log(null === undefined); // false（null と undefined は別の型）
具体例で比較する
== と === の挙動の違いを、よくある比較パターンで見ていきましょう。
数値と文字列の比較
// == では文字列が数値に変換されて比較される console.log("42" == 42); // true console.log("0" == 0); // true // === では型が違うので必ず false console.log("42" === 42); // false console.log("0" === 0); // false
真偽値との比較
// == では真偽値が数値に変換される（true → 1, false → 0） console.log(1 == true); // true console.log(0 == false); // true console.log("1" == true); // true（true が 1 に変換され、その後 "1" が 1 に変換される） // === では型が違うので false console.log(1 === true); // false console.log(0 === false); // false console.log("1" === true); // false（string と boolean は別の型）
空文字列との比較
// == では空文字列が 0 に変換される console.log("" == 0); // true console.log("" == false); // true // === では型が違うので false console.log("" === 0); // false console.log("" === false); // false
null と undefined の比較は特別
== には、null と undefined を等価とみなす特別な性質があります。
// == では null と undefined は等価 console.log(null == undefined); // true console.log(null == null); // true console.log(undefined == undefined); // true
一方 === では型が違うため、null と undefined は別物として扱われます。
// === では型が違うので false console.log(null === undefined); // false console.log(null === null); // true console.log(undefined === undefined); // true
value == null で両方をまとめてチェックする
この特性を利用すると、value が null または undefined のどちらかであるかを 1 行で判定できます。
// value が null または undefined かを 1 行でチェック if (value == null) { console.log("value は null または undefined です"); } // === で書くと 2 つの条件を書く必要がある if (value === null || value === undefined) { console.log("value は null または undefined です"); }
これは == を使う数少ない実用的なケースで、実務でもよく見かけます。
NaN は自分自身とも等しくない
== でも === でも、NaN（Not a Number）は自分自身と等しくないという特殊な性質を持ちます。
// NaN は何と比較しても false console.log(NaN == NaN); // false console.log(NaN === NaN); // false
NaN かどうかを判定したい場合は、Number.isNaN() を使用してください。
// NaN の判定には Number.isNaN() を使う console.log(Number.isNaN(NaN)); // true（NaN のときだけ true） console.log(Number.isNaN(123)); // false（数値なので false）
まとめ
JavaScript の == と === の違いを振り返ります。
==（等価演算子）は比較前に型変換を行う===（厳密等価演算子）は型変換を行わず、型と値の両方を比較する- 基本的には
===を使うべき NaNはどちらの演算子でも自分自身と等しくならない
=== を使う習慣をつけることで、型変換による思わぬバグを防げます。
コードの意図も明確になるため、ぜひ実践してみてください。