JavaScriptでmap()を使って配列の文字列を新しい配列内のオブジェクトのキーに変換する方法

配列の文字列をオブジェクトのキーとして持つ新しい配列を作成するには？

JavaScriptでは、map()メソッドと計算プロパティ名（Computed Property Names）を組み合わせることで、既存の配列の文字列を、その文字列をキーとしたオブジェクトの配列へと簡単に変換できます。

まず、次のような配列があるとします。

var values = ['studentNames', 'studentMarks'];

この配列を、各文字列がキーとなり、値が空の配列であるオブジェクトを持つ新しい配列に変換するには、以下のようにmap()を使用します。

var convertIntoNewArray = values.map(arrayObject => ({ [arrayObject]: [] }));

ここでのポイントは、アロー関数内で{ [arrayObject]: [] }という形式を使っている点です。角括弧で囲むことで、変数arrayObjectの値が動的にオブジェクトのキーとして設定されます。

コード例

以下が実際のコードです。

var values = ['studentNames', 'studentMarks'];
console.log(values);
var convertIntoNewArray = values.map(arrayObject => ({ [arrayObject]: [] }));
console.log(convertIntoNewArray);

プログラムの実行方法

上記のプログラムを実行するには、Node.js環境で次のコマンドを使用します。

node fileName.js

ここでは、ファイル名を「demo281.js」にして保存しています。そのため、実行コマンドは「node demo281.js」となります。

実行結果

このプログラムを実行すると、コンソールには以下のように出力されます。

PS C:\Users\Amit\javascript-code> node demo281.js
[ 'studentNames', 'studentMarks' ]
[ { studentNames: [] }, { studentMarks: [] } ]

出力結果を見ると、元の配列の各文字列（'studentNames'と'studentMarks'）が、それぞれオブジェクトのキーに変換され、値として空の配列[]が割り当てられていることが確認できます。

このテクニックは、APIレスポンスのデータ整形や、初期状態を持つオブジェクト構造を動的に生成したい場合など、さまざまなシーンで活用できます。