【JavaScript】Objectのkeyとvalueを取得する【Object.entries】

はじめに

コジマです。

Objectのkeyとvalueをそれぞれ変数として取りたいときありますよね。

これは習うより慣れろ。

この書き方覚えましょう。

const user = {
  id: 1,
  name: 'Tanaka',
  age: 30,
  sex: 'Male'
};

for (const [key, value] of Object.entries(user)) {
  console.log(`KEY is ${key}, VALUE is ${value}`);
}

出力結果

> "KEY is id, VALUE is 1"
> "KEY is name, VALUE is Tanaka"
> "KEY is age, VALUE is 30"
> "KEY is sex, VALUE is Male"

簡単に解説

Object.entries()というメソッドを使用します。
Object.entries()メソッドはオブジェクトを引数にとり、key, valueの配列を返します。

これをfor文で回してやることでkey, valueを取得できるというわけです。

Object.entiries()の戻り値を観察する

const user = {
  id: 1,
  name: 'Tanaka',
  age: 30,
  sex: 'Male'
};

console.log(Object.entries(user));

出力結果

> Array [Array ["id", 1], Array ["name", "Tanaka"], Array ["age", 30], Array ["sex", "Male"]]

実際にkey, valueを要素に持つ配列が返ってきてることが分かります。

さいごに

key, valueが欲しいときにはObject.entries()が使えるよ～って話でした。

公式ページは以下です。
Object.entries()

この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです！

もっと学びたい人はこちら

JavaScriptをもっと学びたいエンジニアのためにおすすめのUdemy講座を紹介いたします！

JavaScript初心者向けの講座です。
HTML、CSSと合わせて学ぶことができます。
フロントエンド開発の基本的な知識を網羅的に学ぶことができます。
個人的には著作権表記についても触れているところが推せますね。
ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！

JavaScriptをより深く学びたい人はこちらがおすすめです。
JavaScript初心者を脱するとよりよいコードを書かなければなりません。
つまずきがちなオブジェクト操作や、非同期処理の仕組みについて学ぶこともできるため、JavaScriptの仕組みから深く学ぶことができます。
【JS】ガチで学びたい人のためのJavaScriptメカニズム

気になった人はぜひ見てみてくださいね！

以上、コジマでした。