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

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

JavaScriptにおける「緩い等価（Loose Equality）」を表す演算子が「==」（抽象的等価演算子）です。この演算子を使うと、比較対象となるオペランド同士の値がまず共通の型へ自動的に変換され、その上で等しいかどうかが判定されます。

そのため、型が異なる値同士であっても比較が成立します。例えば、数値の 1 と文字列の "1" を比較すると、文字列側が数値へ変換されて true となります。また、undefined == null も特別なルールによって true と評価されます。

一方で、暗黙的な型変換によって意図しない結果を招く可能性があるため、実務ではより厳密な比較を行う「===」（厳密等価演算子）の使用が推奨される場面も多くあります。「==」の挙動を正しく理解しておくことは、バグの防止につながります。

コード例

<!DOCTYPE html>
<html lang="en">
<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>Loose equality in JavaScript.</h1>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button see some comparisons using loose equality</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML = "According to loose equality <br>";
        if (1 == "1") {
            resEle.innerHTML += "1 is equal to '1'<br>";
        }
        if (undefined == null) {
            resEle.innerHTML += "undefined is equal to null <br>";
        }
    });
</script>
</body>
</html>

コードのポイント

ボタンがクリックされると、if 文の中で2つの緩い等価比較が行われます。

  • 1 == "1"：文字列 "1" が数値 1 に変換されてから比較されるため、true になります。
  • undefined == null：緩い等価では undefined と null は互いに等しいとみなされるため、true になります。

出力結果

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

「CLICK HERE」ボタンをクリックすると −

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

このように、緩い等価演算子「==」は型を問わず値を柔軟に比較できる便利な反面、暗黙の型変換による予期せぬ挙動にも注意が必要です。用途に応じて「==」と「===」を使い分けることが、安全なJavaScriptプログラミングの基本となります。

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

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

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

    はじめにJavaScriptには、値を比較するための2種類の等価演算子が用意されています。それぞれ動作が異なるため、適切に使い分けることが重要です。寛容等価演算子（==）とは寛容等価演算子（==）は、比較対象となるオペランド同士の値を共通の型に変換（型強制）した上で、等しいかどうかを判定します。そのため、数値と文字列のように異なる型同士でも、「値が同じ」とみなされれば true を返します。厳密等価演算子（===）とは一方、厳密等価演算子（===）は、値だけでなくデータ型まで含めて比較を行います。値と型の両方が一致した場合にのみ true を返し、それ以外は false を返します。予期しない