JavaScriptでオブジェクトの比較をするObject.is()が便利

こんにちは。株式会社PHONE APPLI　ウェブデベロップチームのくりきです。
この記事は、使ってみて便利だと思ったJavaScriptでオブジェクトを比較するメソッドについて書いたものです。

JavaScriptでオブジェクトを比較するには、従来では等価演算子==や厳密等価演算子===を使うことが一般的でした。 また下記のようにJSON.stringfyを使う方法もありますが、コードが長くなることや、オブジェクトの中身の順番が入れ替わっただけで偽判定されるという理由で不便です。

そこで、Object.is()が活躍します。
使い方は非常にシンプルで、第一引数と第二引数が同じオブジェクトの場合にtrueを返します。

以下にちょっとしたサンプルを示します。

let a = {A: 'aaa', B: 'bbb'};

console.log(Object.is(a, a));  -> true

ただし、この場合はfalseが返ります。

let a = {A: 'aaa', B: 'bbb'};
let b = {A: 'aaa', B: 'bbb'};

console.log(Object.is(a, b)); -> false

一方、オブジェクトそのものではなく中身が同一かどうか確かめるには、JSON.stringify()を使うのが便利です。値をJSONに変換してから比較することになるので、以下はtrueが返ります。

let a = {A: 'aaa', B: 'bbb'};
let b = {A: 'aaa', B: 'bbb'};

console.log(JSON.stringify(a) === JSON.stringify(b)); -> true

また、弊社のプロジェクトでは基本的に厳密等価演算子===しか使いませんが、等価演算子==の場合と結果が異なることは気をつけておくべきかと思います。

等価演算子==では以下のような挙動をするので注意が必要です。

let a = '';
let b = false;

console.log(a==b); -> true

let a = 1;
let b = true;

console.log(a==b); -> true
console.log(Object.is(a, b)); -> false

Object.is()は厳密等価===とほぼ同じ挙動をします。
Object.is()が===よりも便利なのは、空要素のチェックをする場合や、関数の中身を確認する場合です。 以下のコードは最もシンプルな例です。

let a = NaN;
let b = NaN;

console.log(a===b); -> false
console.log(Object.is(a, b)); -> true

厳密にオブジェクト要素の比較をする必要がある場合には、Object.is()は大変有効です。

より詳細は、以下のドキュメントをご参照ください。

developer.mozilla.org

以上、今回はJavaScriptの話でした。参考になれば幸いです。

PHONE APPLIについて

phoneappli.net
phoneappli.net