【JavaScript】mapメソッドを使ってオブジェクトの配列にプロパティを追加する方法

この記事ではJavaScriptの『mapメソッド』について

mapメソッドを使ってオブジェクトの配列にプロパティを追加する方法
mapメソッドを使ってオブジェクトごとに異なるプロパティ値を設定する方法

などをプログラム例を用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。

mapメソッドを使ってオブジェクトの配列にプロパティを追加する方法

mapメソッドは配列の各要素に関数を適用し、その結果を新しい配列として返すJavaScriptのメソッドです。

例えば、以下に示すようなオブジェクトの配列があるとします。

[
  {name: 'Taro', age: 30,},
  {name: 'Yuki', age: 28},
  {name: 'Kumi', age: 15}
]

このオブジェクトの配列に対して、mapメソッドを用いると、以下に示すように、新しいプロパティ(例えば、idやcountry)を追加することができます。

[
  { id: 0, name: 'Taro', age: 30, country: 'Japan' },
  { id: 1, name: 'Yuki', age: 28, country: 'Japan' },
  { id: 2, name: 'Kumi', age: 15, country: 'Japan' }
]

この記事では上記を実現するための様々なプログラム例を説明します。

プログラム例1

// 元のオブジェクトの配列
let objArray = [
    { name: 'Taro', age: 30 },
    { name: 'Yuki', age: 28 },
    { name: 'Kumi', age: 15 }
];

// mapメソッドを用いて、objArrayに新しいプロパティ(idとcountry）を追加
let newObjArray = objArray.map((obj, index) => {
    return {
        id: index,          // 新たなプロパティを追加
        ...obj,             // スプレッド構文を用いて、元のオブジェクトを複製
        country: 'Japan'    // 新たなプロパティを追加
    };
});

console.log(newObjArray);

このプログラムを実行すると、「新しいオブジェクトの配列newObjArray」は以下のようになります。「元のオブジェクトの配列objArray」に新しいプロパティ(idとcountry)が追加されています。

[
  { id: 0, name: 'Taro', age: 30, country: 'Japan' },
  { id: 1, name: 'Yuki', age: 28, country: 'Japan' },
  { id: 2, name: 'Kumi', age: 15, country: 'Japan' }
]

この手法は、データの整形や加工が必要な場合に便利です。

オブジェクトごとに異なるプロパティ値を設定する方法

mapメソッド内で条件分岐や計算を行えば、オブジェクトごとに異なるプロパティ値を設定することもできます。

そのプログラム例を以下に示します。

プログラム例2

// 元のオブジェクトの配列
let objArray = [
    { name: 'Taro', age: 30 },
    { name: 'Yuki', age: 28 },
    { name: 'Kumi', age: 15 }
];

// mapメソッドを用いて、objArrayに新しいプロパティ(idとisAdult）を追加
let newObjArray = objArray.map((obj, index) => {
    return {
        id: index,              
        ...obj,
        isAdult: obj.age >= 20  // 20歳以上ならtrue、それ以外ならfalseとなるプロパティ値
    };
});

console.log(newObjArray);

このプログラムを実行すると、「新しいオブジェクトの配列newObjArray」は以下のようになります。isAdultプロパティの値がオブジェクトによって異なる値になっています。

[
  { id: 0, name: 'Taro', age: 30, isAdult: true },
  { id: 1, name: 'Yuki', age: 28, isAdult: true },
  { id: 2, name: 'Kumi', age: 15, isAdult: false }
]

また、以下のプログラムに示すようにmapメソッドと条件分岐を組み合わせることで、オブジェクトごとに異なるプロパティを追加することもできます。

そのプログラム例を以下に示します。

プログラム例3

// 元のオブジェクトの配列
let objArray = [
    { name: 'Taro', age: 30, gender: 'male' },
    { name: 'Yuki', age: 28, gender: 'female' },
    { name: 'Kumi', age: 15, gender: 'female' }
];

// mapメソッドを用いて、objArrayに新しいプロパティ(idとgreeting）を追加
let newObjArray = objArray.map((obj, index) => {
    let greeting;
    if (obj.gender === 'male') {
        greeting = 'Hello, Mr. ' + obj.name;
    }
    else if (obj.gender === 'female') {
        greeting = 'Hello, Ms. ' + obj.name;
    }
    else {
        greeting = 'Hello, ' + obj.name;
    }
    return {
        id: index,
        ...obj,
        greeting: greeting  // オブジェクトごとに異なるプロパティを追加
    };
});

console.log(newObjArray);

このプログラムを実行すると、「新しいオブジェクトの配列newObjArray」は以下のようになります。greetingプロパティの値は性別が男性の場合は「Mr」、女性の場合は「Ms」となるように設定されています。

[
  { id: 0, name: 'Taro', age: 30, gender: 'male', greeting: 'Hello, Mr. Taro' },
  { id: 1, name: 'Yuki', age: 28, gender: 'female', greeting: 'Hello, Ms. Yuki' },
  { id: 2, name: 'Kumi', age: 15, gender: 'female', greeting: 'Hello, Ms. Kumi' }
]

本記事のまとめ

この記事ではJavaScriptの『mapメソッド』について、以下の内容を説明しました。

mapメソッドを使ってオブジェクトの配列にプロパティを追加する方法
mapメソッドを使ってオブジェクトごとに異なるプロパティ値を設定する方法

お読み頂きありがとうございました。