導入
JavaScriptにおいて比較演算子は日常的に使用しますが、その挙動を正しく理解していないと、予期せぬバグや脆弱性の原因になります。特に型変換を伴う比較は、論理エラーの温床です。本記事では、実務で安全かつ保守性の高いコードを書くために必須となる、比較演算子の正しい使い分けと注意点を解説します。
基礎知識
JavaScriptの比較演算子は、大きく分けて「抽象的等価演算子（==, !=）」と「厳密等価演算子（===, !==）」の2種類が存在します。
重要な違いは「型変換」の有無です。
・== (等価演算子): 比較対象の型が異なる場合、自動的に型変換（暗黙の型変換）を行ってから比較します。
・=== (厳密等価演算子): 型と値の両方が一致している場合のみtrueを返します。
実務においては、コードの予測可能性を高めるために、原則として「厳密等価演算子」を使用することが推奨されます。
実装/解決策
実務では「値が等しいか」だけでなく、「型まで含めて意図通りか」を検証する必要があります。例えば、APIから取得した数値の「0」と、文字列の「”0″」を区別したい場面は非常に多いです。
厳密比較を使用することで、意図しない型変換によるバグを未然に防ぎ、デバッグの時間を大幅に削減できます。
サンプルプログラム
以下のコードは、厳密比較と抽象比較の違いを実証するサンプルです。
// 1. 厳密等価演算子 === (推奨)
const id = 100;
if (id === ‘100’) {
console.log(‘一致します’); // ここは実行されません
} else {
console.log(‘型が異なるため一致しません’); // こちらが正しく実行されます
}
// 2. 比較演算子の活用例
const score = 85;
// 数値の範囲判定
if (score >= 80 && score <= 100) {
console.log('合格です');
}
// 3. 配列やオブジェクトの比較（注意点）
const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];
console.log(arr1 === arr2); // false: オブジェクトや配列は参照型なので値が同じでもfalseになります
応用・注意点
1. 参照型の比較: サンプルでも示した通り、オブジェクトや配列を「===」で比較すると、中身が同じでもfalseになります。これらを比較したい場合は、JSON.stringifyで文字列化するか、Lodashの_.isEqualのようなライブラリを使用して「ディープ比較」を行う必要があります。
2. nullとundefined: 「== null」という書き方は、nullとundefinedの両方をチェックできるため、実務上のイディオムとして利用されることがあります。ただし、ESLintなどの静的解析ツールでは、明示的な比較が推奨されることが多いです。
3. NaNの扱い: 「NaN === NaN」はfalseを返します。数値がNaNかどうかを判定したい場合は、必ず「Number.isNaN(value)」を使用してください。
これらのルールを意識し、常に「型」まで意識したコーディングを心がけることで、より堅牢なフロントエンドアプリケーションを構築できます。