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

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

JavaScriptでは、文字列・数値・真偽値などのプリミティブ型はその「値」に基づいて比較されます。一方、オブジェクト(ネイティブオブジェクトでも独自に定義したカスタムオブジェクトでも)は「参照」に基づいて比較されます。

「参照による比較」とは、複数のオブジェクトがメモリ上の同じ場所を指しているかどうかを判定するという意味です。つまり、プロパティの中身が完全に一致していても、別々に生成された2つのオブジェクトは等しいとみなされません。

押さえておきたいポイント

  • プリミティブ型: 値が同じであれば == や === の比較で true になる
  • オブジェクト型: 同じインスタンス(同一の参照)を共有している場合のみ true になる

以下のコードは、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: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>JavaScriptにおけるオブジェクトの等価性</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックするとオブジェクトが比較されます</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    let resEle = document.querySelector(".result");
    let obj = {
        name: "Rohan",
        age: 21,
    };
    let obj1 = {
        name: "Rohan",
        age: 21,
    };
    let obj2 = obj;
    BtnEle.addEventListener("click", () => {
        if (obj != obj1) {
            resEle.innerHTML = "obj is not equal to obj1 <br>";
        }
        if (obj2 === obj) {
            resEle.innerHTML += "obj2 is equal to obj";
        }
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

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

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

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

コードの解説

obj と obj1 は同じ name プロパティと age プロパティを持っていますが、それぞれ独立したオブジェクトとして新しく生成されているため、メモリ上の保存場所が異なります。そのため obj != obj1 は true となり、「等しくない」と判定されます。

一方、obj2 には let obj2 = obj; によって obj への参照が代入されています。この場合、obj2 と obj はメモリ上のまったく同じオブジェクトを指しているため、obj2 === obj は true となり、「等しい」と判定されるのです。

このように、オブジェクト同士を比較する際は「中身が同じかどうか」ではなく「同じ参照を共有しているかどうか」が判定基準になる点に注意しましょう。もし中身(プロパティの値)を深く比較したい場合は、JSON.stringify() を使った文字列比較や、再帰的な比較処理、あるいは Lodash の _.isEqual() などのユーティリティを利用するのが一般的です。

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

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

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

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