JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptにおける厳密等価演算子（===）と寛容等価演算子（==）の違いを徹底解説

はじめに

JavaScriptには、値を比較するための2種類の等価演算子が用意されています。それぞれ動作が異なるため、適切に使い分けることが重要です。

寛容等価演算子（==）とは

寛容等価演算子（==）は、比較対象となるオペランド同士の値を共通の型に変換（型強制）した上で、等しいかどうかを判定します。そのため、数値と文字列のように異なる型同士でも、「値が同じ」とみなされれば true を返します。

厳密等価演算子（===）とは

一方、厳密等価演算子（===）は、値だけでなくデータ型まで含めて比較を行います。値と型の両方が一致した場合にのみ true を返し、それ以外は false を返します。予期しない型変換によるバグを防げるため、一般的にはこちらの使用が推奨されています。

以下は、JavaScriptにおける寛容等価と厳密等価の違いを確認できるサンプルコードです。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>厳密等価 vs 寛容等価</h1>
<div class="result"></div>
<br />
<button class="Btn">クリックしてください</button>
<h3>上のボタンをクリックすると、寛容等価と厳密等価による比較結果が表示されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML = "寛容等価（==）による比較結果：<br>";
        if (1 == "1") {
            resEle.innerHTML += "1 は '1' と等しい<br>";
        }
        if (undefined == null) {
            resEle.innerHTML += "undefined は null と等しい<br>";
        }
        resEle.innerHTML += "<br>厳密等価（===）による比較結果：<br>";
        if (1 === "1") {
            resEle.innerHTML += "1 は '1' と等しい<br>";
        } else {
            resEle.innerHTML += "1 は '1' と等しくない<br>";
        }
        if (undefined === null) {
            resEle.innerHTML += "undefined は null と等しい<br>";
        } else {
            resEle.innerHTML += "undefined は null と等しくない<br>";
        }
    });
</script>
</body>
</html>

実行結果

JavaScriptにおける厳密等価演算子（===）と寛容等価演算子（==）の違いを徹底解説

「クリックしてください」ボタンを押すと、以下のような結果が表示されます。

JavaScriptにおける厳密等価演算子（===）と寛容等価演算子（==）の違いを徹底解説

結果の解説

  • 1 == "1" → true：文字列 "1" が数値に変換されてから比較されるため、寛容等価では等しいと判定されます。
  • undefined == null → true：寛容等価では、undefined と null は互いに等しいと特別に扱われます。
  • 1 === "1" → false：値は同じでも、数値型と文字列型という型の違いがあるため、厳密等価では等しくないと判定されます。
  • undefined === null → false：undefined と null は別々の型であるため、厳密等価では等しくないと判定されます。

まとめ

寛容等価演算子（==）は型変換を行うため便利な反面、意図しない結果を招くことがあります。バグの少ない安全なコードを書くためには、値と型の両方をチェックする厳密等価演算子（===）を使用することがベストプラクティスとされています。

  1. 【図解付き】JavaScriptにおけるオブジェクトの等価性をわかりやすく解説

    JavaScriptでは、文字列・数値・真偽値などのプリミティブ型はその「値」に基づいて比較されます。一方、オブジェクト(ネイティブオブジェクトでも独自に定義したカスタムオブジェクトでも)は「参照」に基づいて比較されます。 「参照による比較」とは、複数のオブジェクトがメモリ上の同じ場所を指しているかどうかを判定するという意味です。つまり、プロパティの中身が完全に一致していても、別々に生成された2つのオブジェクトは等しいとみなされません。 押さえておきたいポイント プリミティブ型: 値が同じであれば == や === の比較で true になる オブジェクト型: 同じインスタンス(同一の参照

  2. JavaScriptの緩い等価（==）演算子とは？仕組みと使い方を解説

    JavaScriptにおける「緩い等価（Loose Equality）」を表す演算子が「==」（抽象的等価演算子）です。この演算子を使うと、比較対象となるオペランド同士の値がまず共通の型へ自動的に変換され、その上で等しいかどうかが判定されます。 そのため、型が異なる値同士であっても比較が成立します。例えば、数値の 1 と文字列の 1 を比較すると、文字列側が数値へ変換されて true となります。また、undefined == null も特別なルールによって true と評価されます。 一方で、暗黙的な型変換によって意図しない結果を招く可能性があるため、実務ではより厳密な比較を行う「===