【JavaScript】map関数を使おう！【配列操作】

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
現在正社員として5年働いたのちフリーランスとして独立しました。

JavaScriptの解説シリーズです。

今回はmap関数について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

map関数が使えるようになる

map関数を使おう
まとめ

map関数を使おう

map関数とは

map関数とは、配列の要素をアップデートし、新しい配列を作成する関数です。

【JavaScript】配列の作り方【array】

この記事を読むと・・・配列の作り方がわかる配列のデータの取得ができる配列とオブジェクトの違いがわかる

■構文

配列.map((変数) => 更新処理);

このように記述することで配列の中身を1つずつ順番に取り出し、
それぞれに更新処理を適用することが出来ます。

かなり自由度の高い関数だよ！

実際に処理を作ってみよう！

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

// numbersの各要素を×10する
const newNumbers = numbers.map((num) => num * 10);

console.log(newNumbers);

【出力結果】

[ 10, 20, 30, 40, 50 ]

このように記述することで配列の中身を1つずつ順番に取り出し、
すべての要素に×10した新しい配列を返すことができました。

今回はわかりやすいように数値を渡したけど
ここにオブジェクトが入っていてそれを操作するのが最もポピュラーな使い方だよ！

引数にindexを渡そう！

配列.map((変数, index) => 更新処理);

このように記述することで配列の更新処理に、ループ番号を
渡すことが出来ます。

// ユーザリストの宣言
const userList = [
  //key  : value
  { name: "サメハック", age: 29 },
  { name: "ねこハック", age: 31 },
  { name: "いぬハック", age: 40 },
  { name: "ぶたハック", age: 29 },
];

// ユーザオブジェクトを展開し、idプロパティにindex番号を渡す
const newUserList = userList.map((user, index) => ({ ...user, id: index }));

console.log(newUserList);

【出力結果】

[
  { name: 'サメハック', age: 29, id: 0 },
  { name: 'ねこハック', age: 31, id: 1 },
  { name: 'いぬハック', age: 40, id: 2 },
  { name: 'ぶたハック', age: 29, id: 3 }
]

このように、オブジェクトにプロパティを追加しつつ
ループ番号を渡すことが出来ました。

スプレッド構文についてはこちらをご参照ください。

【JavaScript&TypeScript】スプレッド構文を使おう！【...Object】

スプレッド構文はモダンなフレームワークでも多数使用されているので
この機会に理解しちゃおう！

元の配列を操作しよう

配列.map((変数, index, array※元の配列がそのまま入る) => 更新処理);

このように記述することで、元の配列を操作することが出来ます。

// ユーザリストの宣言
const userList = [
  //key  : value
  { name: "サメハック", age: 29 },
  { name: "ねこハック", age: 31 },
  { name: "いぬハック", age: 40 },
  { name: "ぶたハック", age: 29 },
];

// 元の配列を引数として渡し、ageプロパティを+10する
userList.map((user, index, array) => (array[index].age = user.age + 10));
// 以下の記述でも同じ
// userList.map((user, index, array) => (array[index].age = array[index].age + 10));

console.log(userList);

【出力結果】

[
  { name: 'サメハック', age: 39 },
  { name: 'ねこハック', age: 41 },
  { name: 'いぬハック', age: 50 },
  { name: 'ぶたハック', age: 39 }
]

これはあまり使わないよ！

まとめ

map・・・配列の中から条件の合う最初の要素を取り出す関数
配列.map((変数) => 条件式);

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram