【初学者向け】JavaScriptのmapとfilterについて #JavaScript

はじめに

今回はJS勉強し始めた方向けにmapやfillterの解説をしていきます。(※Mapオブジェクトの方ではないです)
後半の【レベルUP】は少し難しく感じるかもしれないので飛ばしてもらって構いません

mapとfilterとは

２つとも配列に関して使用できる関数です。
配列処理でfor文を使わなくて済みます。

ぞれぞれのイメージを記号を使って表すと

map: 配列に同じ処理をして新しい配列を生成
[ 🔴 , 🔵 , 🟡 ].map(○ → □) → [ 🟥 , 🟦 , 🟨 ]

filter: 条件を満たす要素のみ取り出し新しい配列を生成
[ 🔴 , 🟦 , 🟨 , 🔺 ].filter(□) → [ 🟦 , 🟨 ]

mapの使い方

今回はある配列にmapを使って『２倍にする』という処理をしていきます。

//まずは配列arryを用意
const arry = [1, 2, 3, 4];

//配列arryにmapを使用して新しい配列arry2として定義
const arry2 = arry.map((num) => {
   return num * 2;
})

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

上の流れを見ていきましょう。
①引数に配列の要素が順番に入ってくる(引数のnumに配列arryの要素が入っていきます ※引数の名前は任意です。)
②順番に同じ処理をする(今回はreturn num * 2なので値を2倍して返す)
③新しい配列が生成される(今回はarryからarry2が生成)　

filterの使い方

今回はある配列にfilterを使って『偶数だけ取り出す』処理をしていきます。

//配列を用意
const arry = [1, 2, 3, 4, 5];

//新しい配列arry2を用意。右辺でarryにfilterを使用。
const arry2 = arry.filter((num) => {
   //2で割ってあまりが0となるものだけ返す
   return num % 2 === 0;
});

console.log(arry2);   //[2, 4]

①引数に配列の要素が順番に入ってくる
②return文で条件式を書く
③条件式を満たすものだけ取り出して新しく配列を生成

【レベルUP編】

①引数を複数使用
mapもfilterも引数を3つ持つことができます。(第2引数はindex。第3引数は配列自体を表します)
第二引数とテンプレートリテラルを使用すると

const nameArry = ["近本", "中野", "マルテ"];

nameArry.map((name, index) => console.log(`${index + 1}番は${name}です`));
//1番は近本です
//2番は中野です
//3番はマルテです

と表すことができます。

②map + if文
mapの中でif文を使用し、条件分岐(※処理を行う要素、行わない要素を分けること)ができます。

const nameArry = ["近本", "中野", "マルテ"];
const newNameArr = nameArr.map((name) => {
    if(name === "マルテ") {
     return name
    } else {
     return `${name}君`
    }
})
console.log(newNameArr);
//近本君
//中野君
//マルテ

③map + filter
今回はある配列にfilterで『奇数のみ取り出す』処理を行い、その後mapで『＋１０する』処理を行います。

const arry = [1, 2, 3, 4, 5, 6];

const answer = arry.filter(num => num % 2 === 1).map(num => num + 10);
console.log(answer);      // 11 13 15

ちなみにreduceを使用して同様の処理も可能。

const answer = arry.reduce((acc, cur) => {
  if (cur % 2 === 1) {
    const plusNum = cur + 10;
    acc.push(plusNum);
  }
  return acc;
}, []);

console.log(answer);

※reduceの初期値として空配列を使用しています。詳しくは参考記事をご覧ください。

参考記事

reduceの初期値について