JavaScriptで2つの配列を1つのオブジェクトに結合する方法（reduce活用）

はじめに

JavaScriptでは、同じ長さを持つ2つの配列を1つのオブジェクトに変換したいケースがよくあります。たとえば、1つ目の配列の各要素をオブジェクトのキーとし、2つ目の配列の対応する要素をその値としてマッピングするような場面です。

本記事では、reduce()メソッドを使ってこの処理を簡潔に実装する方法を解説し、あわせて実行結果やよりモダンな代替手段についても紹介します。

reduce()を使った実装方法

基本的な考え方はシンプルです。1つ目の配列に対してreduce()を実行し、その処理の中でインデックスを利用して2つ目の配列の要素へアクセスします。こうすることで、キーと値のペアを順番にオブジェクトへ格納していくことができます。

コード例

const keys = [
  'firstName',
  'lastName',
  'isEmployed',
  'occupation',
  'address',
  'salary',
  'expenditure'
];
const values = [
  'Hitesh',
  'Kumar',
  false,
  'Frontend Developer',
  'Tilak Nagar, New Delhi',
  90000,
  45000
];
const combineArrays = (first, second) => {
  return first.reduce((acc, val, ind) => {
    acc[val] = second[ind];
    return acc;
  }, {});
};
console.log(combineArrays(keys, values));

実行結果

コンソールには以下のように出力されます。

{
  firstName: 'Hitesh',
  lastName: 'Kumar',
  isEmployed: false,
  occupation: 'Frontend Developer',
  address: 'Tilak Nagar, New Delhi',
  salary: 90000,
  expenditure: 45000
}

コードのポイント

• reduce()の第2引数として空のオブジェクト{}を渡すことで、アキュムレータの初期値を設定しています。
• コールバック関数の第3引数indで現在のインデックスを受け取り、それを使って2つ目の配列の対応する要素を取得します。
• acc[val] = second[ind]により、1つ目の配列の要素をキー、2つ目の配列の要素を値としてペアを追加していきます。
• 文字列だけでなく、falseのような真偽値や数値もそのまま値として格納されます。

代替方法：Object.fromEntries()を使う

ES2019以降の環境では、Object.fromEntries()とmap()を組み合わせることで、より宣言的で読みやすいコードにできます。

const combineArrays = (first, second) =>
  Object.fromEntries(first.map((key, ind) => [key, second[ind]]));

こちらも上記のreduce()版とまったく同じ結果が得られます。プロジェクトでサポートしているJavaScriptのバージョンに応じて、使いやすい方を選択するとよいでしょう。

まとめ

2つの配列を1つのオブジェクトに結合する際は、reduce()を使うのが定番の手法です。インデックスを活用すれば、片方の配列をキー、もう片方を値として自然にマッピングできます。また、モダンなJavaScript環境ではObject.fromEntries()との組み合わせも有効な選択肢となります。用途や環境に合わせて、最適な方法を採用してください。