JavaScriptのJSONオブジェクトが入った変数が、空かどうかの判定にめっちゃ時間かけちゃったという話
JSONオブジェクトの扱いについて
かなり初歩的な内容だが、業務中にしっかりつまずいた内容について記述して起きます。
やろうとしていたことは、JSONオブジェクトが入った変数が、空のオブジェクトなのか、何かしらの値が入ったオブジェクトなのかを比較することです。
コードの実行結果のキャプチャは paiza.io の実行結果を載せています。
JSにおけるFalsyの扱い。
先入観って怖いですね。普段そこまでしっかりJSを書いていなかったからか、 const a = {} は falsy だと思っていた…しかし実際は falsy ではなくて、ちゃんとからのオブジェクトとして扱われます。
なので、当然ちゃ当然ですが下記のようなコードはずっと true になります。
const a = {};
if (a) { // 必ずtrue
console.log('aは空オブジェクト');
} else {
console.log('aは何かが入っているオブジェクト');
}
参考
JSオブジェクトの比較について
上記の falsy における勘違いに気づいたので、なら比較してやればいいのか！と安直に思い、下記のようなコードを書いてしまいました。
const a = {};
if (a === {}) {
console.log('aは空オブジェクト');
} else {
console.log('aは何かが入っているオブジェクト');
}
こんどの結果は、ずっと false です。
これはおそらくif文内の {} が別のJSONオブジェクトとして扱われたから…だと思います。（参考にしたQiitaなどの記事でそのように思いました。）
なので、当然 a と {} は別のオブジェクトなのでそら false と判断されるということです。
じゃぁ、結局本当に比べたい場合はどうするの？となりますが、３パターンの方法があります。
Object.keys()を使ってkeyの数で比較- for - in を使う
- 文字列にして比較
Chromeのバージョンによっては1の方法だと時間がかかる時があるそうなのですが、自分は1が一番完結でわかりやすいかなと思ったので、1の方法で修正しました。
const a = {};
if (Object.keys(a).length === 0) {
console.log('aは空オブジェクト');
} else {
console.log('aは何かが入っているオブジェクト');
}
これでようやく、 a が空オブジェクトかどうかを判定することができるようになりました！
こんな初歩的な内容につまずいてしまい、それなりに時間を潰してしまった…思い込みって怖いですね。少しでも不安だったらちゃんと調べると参考のサイトのようにいっぱい情報は出ているので、それ見たほうが早かったです。
急がば回れですね。
