JavaScriptの等価演算子を初心者向けに詳しく解説
はじめてでもつまずかないように、例をたくさん使ってやさしく説明します。ポイントは「型が同じかどうか」と「値の比較の仕方」です。
等価演算子の基本
==（等しい）: 値を比較する前に、型を自動で変換してから比べる（ゆるい比較）。===（厳密に等しい）: 型も値もまったく同じかを比べる（厳密な比較）。!=（等しくない）:==の逆。!==（厳密に等しくない）:===の逆。
console.log(10 == "10"); // true（文字列"10"が数値10に変換される）
console.log(10 === "10"); // false（型が違う：number と string）
どう違うの？型変換（暗黙の型変換）の具体例
数値と文字列
- ポイント:
==は文字列を数値に変換して比較することがある。
console.log("42" == 42); // true（"42" → 42）
console.log("042" == 42); // true（"042" → 42）
console.log("42a" == 42); // false（"42a" は数値にできない）
console.log("42" === 42); // false（型が違う）
ブール値（true/false）
- ポイント:
trueは数値にすると1、falseは0。
console.log(true == 1); // true
console.log(false == 0); // true
console.log(true === 1); // false（型が違う）
空文字やホワイトスペース
- ポイント: ホワイトスペースだけの文字列は数値にすると
0になる。
console.log("" == 0); // true（"" → 0）
console.log(" " == 0); // true（空白 → 0）
console.log("" === 0); // false（型が違う）
要注意な特別ルール
NaNは何とも等しくない
- ポイント:
NaNは自分自身とも等しくない。
console.log(NaN == NaN); // false
console.log(Number.isNaN(NaN)); // true（NaN判定はこれを使う）
null と undefined
- ポイント:
==では特別に等しいとされるが、===では違う。
console.log(null == undefined); // true（特例）
console.log(null === undefined); // false（型が違う）
オブジェクトの比較は「中身」ではなく「同じものを指しているか」
- ポイント: 見た目が同じでも別物なら等しくない。参照が同じなら等しい。
const a = { x: 1 };
const b = { x: 1 };
const c = a;
console.log(a == b); // false（別々のオブジェクト）
console.log(a === b); // false（参照が違う）
console.log(a === c); // true（同じ参照）
実務での基本方針
- 原則: 比較はまず
===と!==を使う。 - 理由: 暗黙の型変換による「思わぬtrue/false」を避けられる。
- 例外:
nullとundefinedを「どちらでもOK」と扱いたい時だけ==を検討する。
// ユーザー入力を厳密にチェック
const ageInput = "18";
if (Number(ageInput) === 18) {
console.log("成人です");
}
// 値が「未設定かどうか」だけ見たい場合
let value = null; // or undefined
if (value == null) { // null か undefined のとき true
console.log("未設定です");
}
例題で理解を深める
例題1：文字列と数値
- 問題: 次の結果はどうなる？
console.log("0" == 0);
console.log("0" === 0);
console.log("0" == false);
console.log("0" === false);
- 答え:
- “0” == 0: true（”0″ → 0）
- “0” === 0: false（型が違う）
- “0” == false: true（”0″ → 0、false → 0）
- “0” === false: false（型が違う）
例題2：空文字と配列
- 問題: 次の結果はどうなる？
console.log([] == ""); // ?
console.log([] == 0); // ?
console.log([0] == 0); // ?
console.log([1,2] == "1,2"); // ?
- 答え:
- [] == “”: true（空配列→空文字→””）
- [] == 0: true（空配列→””→0）
- [0] == 0: true（”[0]”→”0″→0）
- [1,2] == “1,2”: true（配列→”1,2″）
例題3：null/undefinedの扱い
- 問題: 次の結果はどうなる？
console.log(null == 0);
console.log(undefined == 0);
console.log(null == undefined);
- 答え:
- null == 0: false（数値変換しない）
- undefined == 0: false（数値変換しない）
- null == undefined: true（特例）
例題4：オブジェクト比較
- 問題: 次の結果はどうなる？
const obj1 = { a: 1 };
const obj2 = { a: 1 };
const obj3 = obj1;
console.log(obj1 == obj2);
console.log(obj1 === obj3);
- 答え:
- obj1 == obj2: false（参照が違う）
- obj1 === obj3: true（同じ参照）
よくある落とし穴と回避策
- “0” と false の比較:
==だとtrueになる。数値に変換してから===で比べる。 - 空文字と0:
==だとtrueになる。入力チェックは明示的に型変換してから。 - NaNの判定: 比較ではなく
Number.isNaN()を使う。 - 配列やオブジェクトの中身比較: 直接の比較ではなく、必要ならJSON文字列化や専用の深い比較関数を使う。
// 入力を数値として比較する安全な書き方
const input = " 42 ";
const num = Number(input);
if (!Number.isNaN(num) && num === 42) {
console.log("42です");
}
まとめの指針
- 原則:
===と!==を使う。 - 型変換が必要なら: 明示的に
Number()やString()で変換してから比較。 - 特例: 未設定チェック（null/undefined）は
value == nullが簡潔。