【JavaScript】filter()とmap()を組み合わせて条件を確認した後、配列に新しいプロパティを追加する方法

JavaScriptで配列を扱う際、「条件に合う要素を抽出しつつ、その結果に新しいプロパティを追加したい」というケースはよくあります。このような場合には、filter()とmap()を組み合わせることで、簡潔かつ効率的に実装できます。

filter()とmap()の役割

filter()は、指定した条件を満たす要素だけを抽出して新しい配列を返すメソッドです。一方のmap()は、配列の各要素に処理を適用し、その結果から新しい配列を生成します。この2つを組み合わせることで、「絞り込み」と「変換」を一連の流れで行うことが可能になります。

サンプルコード

const details =[
    { customerName: 'John', customerCountryName: 'UK', isMarried :true },
    { customerName: 'David', customerCountryName: 'AUS', isMarried :false },
    { customerName: 'Mike', customerCountryName: 'US', isMarried :false }
]
let tempObject = details.filter(obj=> obj.isMarried == true);
tempObject["customerNameWithIsMarriedFalse"] = details.filter(obj =>
obj.isMarried== false).map(obj => obj.customerName);
console.log(tempObject);

上記のプログラムを実行するには、以下のコマンドを使用します。

node fileName.js

ここでは、ファイル名を「demo176.js」としています。

実行結果

このプログラムを実行すると、以下のような出力が得られます。

PS C:\Users\Amit\javascript-code> node demo176.js
[
    { customerName: 'John', customerCountryName: 'UK', isMarried: true }, customerNameWithIsMarriedFalse: [ 'David', 'Mike' ]
]

コードのポイント

まず、details.filter(obj => obj.isMarried == true)によって、isMarriedがtrueの顧客データのみが抽出され、tempObjectに格納されます。続いて、filter(obj => obj.isMarried == false)で未結婚の顧客を抽出し、map(obj => obj.customerName)で顧客名だけの配列に変換しています。最後に、その結果を「customerNameWithIsMarriedFalse」という新しいキーとしてtempObjectに追加することで、元のデータを壊すことなく、必要な情報をまとめた新しいオブジェクトを作成できます。