JavaScriptのオブジェクトでkey,valueを取り出したい時の最適解

長年付け焼き刃的な知識だけでJavaScriptを書いてしまっていることが、そろそろ看過できなくなってきたため、こちらの本で体系的に学び直しをしている最中です。

JavaScript 第7版 [ David Flanagan ]

現在4分の1程度を読み終わったところですが、すごく、すごいです！ごくごく基本的なところでも知らなかった知識がバンバン出てくるし、経験上なんとなく身についてはいるけれど説明できないようなことも明快に言語化されています。特に、ES6以降の知識はインターネットで断片的にしか身につけてこなかったので、「こ、こんなに便利な記法があるなんて〜！」と感動します。逆に、今まで自分はなんてクソコードを生み出していたんだ…と恥ずかしくもなるのですが……。

そのうちの一つが今回のタイトルです。 「オブジェクトからkey,valueを取り出したい」というとても初歩的な処理でも学びがあったのでメモとして残しておきます。

オブジェクトからkey,valueを取り出したい時どうする？

今まで、私はこのようなコードを書いていました。(恥)

Object.keys(obj).forEach((k) => {
  console.log(k, obj[k]);
});

Object.keys()でkeyだけを取り出して、ループで回して、valueはkeyでアクセスする。 もちろんこれで問題なく動作はするのですが、今考えるとちょっと野暮ったいですね…。オブジェクトの変数名が長い時なんかはさらに冗長な感じがしてきます。

結論、最適解はこれ!

for (let [k, v] of Object.entries(obj)) {
  console.log(k, v);
}

これを知った時は、なんてスマートなんだ！と感動しました。

Object.entries()は[key,value]の配列を返してくれます。これはES2017からの機能のようです。

let obj = { a: "aaa", b: "bbb", c: "ccc" };
console.log(Object.entries(obj));    // => [ [ 'a', 'aaa' ], [ 'b', 'bbb' ], [ 'c', 'ccc' ] ]

これを、for/ofループで回しますが、その際、分割代入 let [k, v] で配列を2つの変数に展開します。for/ofループも分割代入も、ES6からの機能のようです。とても便利ですね。 それに、forEach()と違ってfor/ofではbreak文も使えるので、より処理の幅が広がりそうです。

Object.entries() - JavaScript | MDN

公式ドキュメントにも書いてありますが、これはfor/inループの反復処理と同じ挙動。ただし、for/inループはオブジェクトが継承しているプロパティも出力されるため、何も考えないと予期せぬ挙動をすることがあります。できれば、安全に独自プロパティだけ取り出せるこちらの記法が良さそうです。

たったこれだけのことなのだけど

たったこれだけのことなのですが、知っているのと知らないのとでは、スマートさが違うな〜と思いました。野暮ったい書き方をしていても動作はするので、基本的なことほど「調べて書く」をしなくなっていることを反省しました😔

引き続き勉強します！