Javascript map処理

概要

・JavaScriptにおけるmapの処理について共有する。
・mapは連想配列の処理の一種と考えてストリーム的に処理されているんだと捉える。
・mapが使えればデータ操作の幅が広がるため、理解したい。

仕様概要

・Array.prototype.map()メソッドの機能
・配列の要素を別の要素に変換し、変換した値から配列を生成する。
・その際、関数を指定することにより分岐処理を設けることが可能。
・元の配列は変更しない。新しい配列を生成する。

サンプル

以下にサンプルコードを記載する。

const sampleNumbers = [1, 2, 3, 4, 5];

const sampleDoubledNumbers = sampleNumbers.map((number) => {
  return number * 2;
});

console.log(sampleDoubledNumbers); // [2, 4, 6, 8, 10]

・配列オブジェクトの例

const members = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 },
];

const modifiedmembers = members.map((user) => {
  return {
    name: user.name.toUpperCase(),
    age: user.age + 5,
  };
});

console.log(modifiedmembers);
/* [
  { name: 'ALICE', age: 30 },
  { name: 'BOB', age: 35 },
  { name: 'CHARLIE', age: 40 }
] */

まとめ

・Javascriptのmapを利用すると配列の操作をよしなにできる。
・ひとまず迷ったらストリーム的に処理をさせる。