オブジェクトを回す ― for...in と Object.keys

導入

オブジェクトのキーや値を一覧したいときは、Object.keys / Object.values / Object.entries が便利です。

説明

const user = { name: "太郎", age: 25, city: "東京" };

console.log(Object.keys(user));    // ["name", "age", "city"]
console.log(Object.values(user));  // ["太郎", 25, "東京"]
console.log(Object.entries(user)); // [["name","太郎"], ["age",25], ...]

Object.entries と分割代入を組み合わせると、キーと値を同時に取り出せます。

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

for...in でもキーを回せますが、プロトタイプ連鎖の影響を受けやすいため、いまは Object.keys / entries を優先しましょう。

配列の「インデックスと値」を同時に取りたいときは entries() メソッドがあります。

const colors = ["赤", "青", "緑"];
for (const [i, c] of colors.entries()) {
  console.log(i, c);
}

やってみよう

自分で作ったオブジェクトを Object.entries で回して表示してみましょう。

演習

const scores = { math: 80, english: 90 }; のキー一覧を Object.keys で表示してください。