javascriptのネストしていないオブジェクトを比較する

javascriptのオブジェクトを比較する時に、等価演算子(===)を使ってはだめというのは良く知られています。(たぶん)

"JS オブジェクト 比較"とかをキーワードにぐぐると、deep-equal使えとか、JSON.stringifyして比較すると順序が一致しないから駄目とかそういう情報がすぐに見つかることでしょう。

でも実際には、次のような ネストの無い オブジェクト同士の比較ができれば十分ということが多々あります。

const foo={hoge:"hoge", huga:"huga"}
const bar={hoge:"hoge", huga:"huga"}
const baz={hoge:"piyo", huga:"poyo"}

こんな作業にわざわざパッケージを導入するのは、鶏を捌くのに牛刀を持ち出すようなもの。
というわけで、JSのビルドイン関数だけでなんとかしてみましょう。

function shallowEqual(l,r){
 if(l===r){
   return true
 }
 
 const lKeys=Object.keys(l)
 const rKeys=Object.keys(r)
 if(lKeys.length !== rKeys.length){
   return false
 }
 return !lKeys.some( (key)=>{
  return  typeof r[key] === "undefined" || l[key] !== r[key]
  }) 
}

最初は、Object.entriesでプロパティと値をとってきて、someに渡せば一発でできるかと思ってたんですが、keyの数が違うケースとか片方のオブジェクトだけに含まれるkeyのこととか考えていくと意外と面倒ですね。

最後にもう一度書いときますが、この関数で比較できるのは、全ての列挙可能なプロパティの値が === で比較できるオブジェクト同士の時だけです。
ネストしたオブジェクトが渡されても、特にエラーは返さず、誤判定することがありますので気をつけてください。

この 作品 は クリエイティブ・コモンズ 表示 - 継承 4.0 国際 ライセンスの下に提供されています。