JavaScript | 基礎構文：オブジェクト － Object.keys / values / entries

Object.keys / Object.values / Object.entries は「オブジェクトを配列に変換する道具」

オブジェクトは「名前付きの引き出しがたくさんあるタンス」でした。
Object.keys / values / entries は、そのタンスを「配列」という形に並べ替えるための道具です。

ざっくり言うとこうです。

Object.keys(obj)
→ プロパティ名だけの配列をくれる

Object.values(obj)
→ 値だけの配列をくれる

Object.entries(obj)
→ [キー, 値] のペアの配列をくれる

「オブジェクトをぐるっと一周したい」「全部のプロパティを処理したい」
というときに、めちゃくちゃよく使います。

Object.keys：プロパティ名の一覧を配列でほしいとき

基本的な使い方

const user = {
  name: "太郎",
  age: 25,
  isAdmin: false,
};

const keys = Object.keys(user);
console.log(keys); // ["name", "age", "isAdmin"]

const user = {
  name: "太郎",
  age: 25,
  isAdmin: false,
};

const keys = Object.keys(user);
console.log(keys); // ["name", "age", "isAdmin"]

Object.keys(user) は、
user が持っている「自分のプロパティ名」を
文字列の配列として返します。

この配列は、普通の配列なので forEach や for...of で回せます。

Object.keys(user).forEach((key) => {
  console.log(key, "=>", user[key]);
});

Object.keys(user).forEach((key) => {
  console.log(key, "=>", user[key]);
});

このコードは、
user の全プロパティを「キーと値のセット」で表示します。

ここが重要です。
「オブジェクトの全プロパティを順番に処理したい」とき、
まず Object.keys(obj) で「キーの配列」を取り出し、
それをループする、というパターンが基本形になります。

Object.values：値だけを配列でほしいとき

基本的な使い方

const user = {
  name: "太郎",
  age: 25,
  isAdmin: false,
};

const values = Object.values(user);
console.log(values); // ["太郎", 25, false]

const user = {
  name: "太郎",
  age: 25,
  isAdmin: false,
};

const values = Object.values(user);
console.log(values); // ["太郎", 25, false]

Object.values(user) は、
プロパティの「値」だけを配列にして返します。

例えば、「合計を出したい」「平均を出したい」など、
値だけをまとめて扱いたいときに便利です。

const scores = {
  math: 80,
  english: 90,
  science: 70,
};

const total = Object.values(scores).reduce((sum, score) => sum + score, 0);
console.log(total); // 240

const scores = {
  math: 80,
  english: 90,
  science: 70,
};

const total = Object.values(scores).reduce((sum, score) => sum + score, 0);
console.log(total); // 240

ここが重要です。
「キーはいらない、値だけまとめて処理したい」というときは
Object.values を使うとスッキリ書けます。

Object.entries：キーと値のペアをまとめて扱いたいとき

基本的な使い方

const user = {
  name: "太郎",
  age: 25,
  isAdmin: false,
};

const entries = Object.entries(user);
console.log(entries);
// [
//   ["name", "太郎"],
//   ["age", 25],
//   ["isAdmin", false]
// ]

const user = {
  name: "太郎",
  age: 25,
  isAdmin: false,
};

const entries = Object.entries(user);
console.log(entries);
// [
//   ["name", "太郎"],
//   ["age", 25],
//   ["isAdmin", false]
// ]

Object.entries(user) は、
[キー, 値] という2つ組の配列を、
さらに配列にした「二重配列」を返します。

これが何に便利かというと、
for...of と組み合わせると、
キーと値を同時に取り出しながらループできることです。

for (const [key, value] of Object.entries(user)) {
  console.log(key, "=>", value);
}

for (const [key, value] of Object.entries(user)) {
  console.log(key, "=>", value);
}

[key, value] の部分は「分割代入」という文法で、
["name", "太郎"] のような配列から
key = "name", value = "太郎" のように
一気に取り出してくれます。

ここが重要です。
「キーも値も両方使いたい」
「オブジェクトを“配列っぽく”扱いたい」
というときは、Object.entries が一番しっくりきます。

どれも「列挙可能な自前のプロパティ」が対象

プロトタイプ由来のものは含まれない

Object.keys / values / entries は、
基本的に「そのオブジェクト自身が持っている“列挙可能なプロパティ”」だけを対象にします。

つまり、
obj.toString のような、
Object.prototype から継承されたプロパティは含まれません。

初心者の段階では、
「自分がオブジェクトリテラルで書いたプロパティだけが対象」
くらいの理解で十分です。

const obj = Object.create({ inherited: 1 });
obj.own = 2;

console.log(Object.keys(obj));   // ["own"]
console.log(Object.values(obj)); // [2]

const obj = Object.create({ inherited: 1 });
obj.own = 2;

console.log(Object.keys(obj));   // ["own"]
console.log(Object.values(obj)); // [2]

inherited はプロトタイプ由来なので、
ここには出てきません。

実務的な使い分けの感覚

何をしたいかで選ぶ

「どれを使うか」は、
自分が何をしたいかで決まります。

プロパティ名だけほしい
→ Object.keys(obj)

値だけほしい
→ Object.values(obj)

キーと値をセットで処理したい
→ Object.entries(obj)

例えば、
「ユーザー情報を全部表示したい」なら entries が自然です。

const user = {
  name: "太郎",
  age: 25,
  email: "taro@example.com",
};

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

const user = {
  name: "太郎",
  age: 25,
  email: "taro@example.com",
};

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

ここが重要です。
「オブジェクトを“配列に変換してから処理する”」という発想を持てると、
一気に書けるコードの幅が広がります。

初心者として「Object.keys / values / entries」で本当に押さえてほしいこと

最後に、要点をコンパクトにまとめます。

Object.keys(obj)
→ プロパティ名の配列（[“name”, “age”, …]）

Object.values(obj)
→ 値の配列（[“太郎”, 25, …]）

Object.entries(obj)
→ [キー, 値] の配列（[[“name”, “太郎”], [“age”, 25], …]）

そして、
「オブジェクトをぐるっと一周したいときは、
まず keys / values / entries で配列にしてからループする」
というパターンを、自分の手で何度か書いてみてください。

例えばこのコードを打って、
出力を眺めてみるのがおすすめです。

const product = {
  name: "ノートPC",
  price: 120000,
  stock: 5,
};

console.log(Object.keys(product));
console.log(Object.values(product));
console.log(Object.entries(product));

const product = {
  name: "ノートPC",
  price: 120000,
  stock: 5,
};

console.log(Object.keys(product));
console.log(Object.values(product));
console.log(Object.entries(product));

「同じオブジェクトなのに、
見方を変えるとこんなに違う形になるんだ」
という感覚がつかめたら、
あなたはもうオブジェクトを“静的な箱”ではなく、
「いろんな角度から切り出せるデータ構造」 として扱えるようになっています。