JavaScriptのObject.entries()入門：オブジェクトを配列として扱う方法

Object.entries()とは

Object.entries()は、オブジェクト自身が持つ列挙可能な文字列キーのプロパティを、[キー, 値]という二要素の配列にして取得するメソッドです。たとえば、{ name: "Alice", age: 30 }からは、[["name", "Alice"], ["age", 30]]のような配列が得られます。MDNのObject.entries()リファレンス

const user = { name: "Alice", age: 30 };

const entries = Object.entries(user);
console.log(entries);
// 期待される出力:
// [ [ "name", "Alice" ], [ "age", 30 ] ]

外側の配列には各プロパティが入り、内側の配列の1番目がキー、2番目が値です。配列として取得できるため、for…ofやfilter()、map()などの配列向け処理につなげやすくなります。

基本構文とfor…ofでの取り出し方

基本構文はObject.entries(object)です。for…ofと分割代入を組み合わせると、キーと値を別々の変数へ取り出せます。

const user = { name: "Alice", age: 30 };

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

// 期待される出力:
// name Alice
// age 30

各要素が必ず[キー, 値]の形になっているため、[key, value]のような分割代入で読みやすく書けます。

開発現場で使いやすい実用例

設定値や検索条件から、条件に合う項目だけを抽出する例です。

const settings = {
  darkMode: true,
  notifications: false,
  autoSave: true,
};

const enabledSettings = Object.entries(settings)
  .filter(([, value]) => value === true);

console.log(enabledSettings);
// 期待される出力:
// [ [ "darkMode", true ], [ "autoSave", true ] ]

表示用の文字列を作る場合は、map()も利用できます。

const conditions = { keyword: "JavaScript", limit: 10 };

const labels = Object.entries(conditions)
  .map(([key, value]) => `${key}: ${value}`);

console.log(labels);
// 期待される出力:
// [ "keyword: JavaScript", "limit: 10" ]

処理の流れは、オブジェクトを配列化する→配列を加工する→必要ならオブジェクトへ戻す、という形です。加工後にオブジェクトが必要なら、Object.fromEntries()を使えます。

const prices = { coffee: 300, tea: 250 };

const increasedPrices = Object.fromEntries(
  Object.entries(prices).map(([key, value]) => [key, value + 50]),
);

console.log(increasedPrices);
// 期待される出力:
// { coffee: 350, tea: 300 }

Object.keys()・Object.values()との違い

キーと値の両方が必要ならObject.entries()、キーだけならObject.keys()、値だけならObject.values()を選ぶと判断しやすくなります。for…in文と比べて、取得結果が配列になるため、後続の配列メソッドへつなげやすい点も特徴です。MDNのObject.keys()・Object.values()を含むリファレンス

使用時に確認したいポイント

• 対象データの型を確認する。nullやundefinedをそのまま渡すとエラーになるため、入力データの仕様を確認します。
• ネストしたオブジェクトは自動的に再帰処理されません。内側のオブジェクトも処理する場合は、別途Object.entries()を適用します。
• 取得結果の順序に依存する処理では、プロパティの仕様と実行環境を確認します。
• 戻り値の配列を変更しても、元のオブジェクト自体が同じ形で変更されるわけではありません。ただし、配列内の値がオブジェクトなどの参照型である場合は、参照先の扱いに注意が必要です。

実務での選び方と実装手順

1. 処理対象がキーだけか、値だけか、キーと値の両方かを確認する。
2. キーと値の両方が必要ならObject.entries()を使い、for…of、filter()、map()から目的に合う方法を選ぶ。
3. 加工後のデータを配列で使うのか、Object.fromEntries()でオブジェクトへ戻すのかを決める。
4. 分割代入の変数名は、処理内容に合わせて読みやすく付ける。

まずは、入力データ、変換処理、出力確認を分けて書くと、処理の流れを追いやすくなります。