【オブジェクト型】同じ値でも比較結果がfalseになる理由

はじめに

同じ値のオブジェクト型について、比較結果がfalseになるのはご存知でしょうか？最近動画を使って勉強をしている中で、個人的には割とびっくりした内容でした。

実際に下記のようなソースコードを書いてみると、値が同じであるにもかかわらず、falseと判定されてしまいます。

// オブジェクト型
const o1 = {"age": 20};
const o2 = {"age": 20};

console.log(Object.is(o1, o2)); // 比較結果が「false」と判定される

そこで、本記事では同じ値のオブジェクト型での比較結果がfalseになる理由を紹介します。

プリミティブ型とオブジェクト型の違い

前提として上記の理由を説明する前に、オブジェクト型との比較結果が異なるプリミティブ型についても併せて紹介します。

種類	型の具体例
プリミティブ型(基本型)	String型, Number型, Boolean型, undefined型, null
オブジェクト型	配列, オブジェクト などプリミティブ型に該当しないもの

// プリミティブ型の例
const p1 = "string"; // string型
const p2 = 1; // number型
const p3 = true; // boolean型
const p4 = null; // object型(null自体はobject型に該当)

// オブジェクト型の例
const o1 = [1, 2, 3]; // object型(配列もobject型に該当)
const o2 = {"age": 20}; // object型

次に、本題である「比較結果がfalseになる理由」についてプリミティブ型と比較しながら説明していきます。理由を知るには、javascriptのメモリ内部の仕組みを理解することが必要になってきます。

メモリ内部の仕組み

比較結果がfalseになる理由を知るためには、プリミティブ型とオブジェクト型とで、メモリへデータが保存される仕組みに違いがあることを理解する必要があります。

プリミティブ型

プリミティブ型では、下記ソースコードを記載すると、trueが返却されます。

const p1 = 100;
const p2 = 100;

console.log(Object.is(p1, p2)); // true

下図のように、プリミティブ型は直接的に値をメモリに保存し、これらの値を比較します。

オブジェクト型

一方でオブジェクト型では、上記で挙げた通り、falseが返却されます。

// オブジェクト型
const o1 = {"age": 20};
const o2 = {"age": 20};

console.log(Object.is(o1, o2)); // 「false」と判定される

下図のように、オブジェクト型は間接的に値をメモリに保存し、番地同士で値を比較します。そのためオブジェクト自体は値が同じであっても、番地が異なることより、比較結果がfalseになるというわけです。

まとめ

プリミティブ型とオブジェクト型での比較結果についてまとめると、下表の通りになります。

種類	メモリ保存方法	同じ値での比較結果
プリミティブ型	直接的(値比較)	true
オブジェクト型	間接的(番地比較)	false

最後まで目を通していただいてありがとうございました！