【JavaScript】mapメソッドとfilterメソッドの違いと使い方・使い分け方

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、JavaScriptの配列メソッドである mapメソッドと filterメソッドについて解説して行きます。

どちらもJavaScriptで使用率の高いメソッドなのでしっかりと機能を理解しておきましょう！

前回の記事では、forEachメソッドと mapメソッドの違いと使い方・使い分け方について解説しました。

こちらも気になる方は、ぜひCheckしてみてください！

【JavaScript】forEachメソッドとmapメソッドの違いと使い方・使い分け方について

【 forEachメソッドと mapメソッドの違いと使い方・使い分け方】

1 Array.prototype.map() の使い方
2 Array.prototype.filter() の使い方
3 map() と filter() の使い分け Sample-Code
4 JavaScript書籍 Ver. 中級-上級者向け
5 JavaScript書籍 Ver. 初級者向け
6 参考・引用
7 最近の投稿

Array.prototype.map() の使い方

Array.prototype.map()では、第一引数のCallBackFunction が配列のvalueを一度ずつ呼び出し、その結果から新しい配列(New-Array)を作成します！

map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、
その結果からなる新しい配列を生成します。
引用元： MDN: Array.prototype.map()

MDNを元に、mapメソッドの基本的な機能をまとめると次のようなものになります。

Array.prototype.map() – 基本的な使い方

構文: const new_array = array.map((element, index, arr)=> {・・・ 処理文 ・・・});

引数: CallBackFunction: arr の要素ごとに呼び出される関数です。 
CallBackFunction が実行されるたびに、返された値が new_array に追加されます。

この関数は、次の3つの引数を持ちます

1. element: 現在処理中の要素の値(CurrentValue)です。
2. index (省略可): 配列内の CurrentValue の index-番号です。
3. arr (省略可): map() を呼び出している配列です。

実行結果(返り値): 与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列(New-Array)です。

// < Array.prototype.map() の使い方 >

const projectList = [
    { value: 'ロボ玉試作1号機', group_name: 'ロボ玉組' },
    { value: '白桃', group_name: null },
    { value: 'ロボ玉試作2号機', group_name: 'ロボ玉組' },
    { value: 'ももちゃん', group_name: 'ロボ玉組' },
    { value: 'ロボ玉試作3号機', group_name: null },
];

// 1. projectList から value の値だけを取り出す
const projValueList = projectList.map(project => project.value);
console.log({projValueList});
// < 出力結果 >
// projValueList: Array(5)
    // 0: "ロボ玉試作1号機"
    // 1: "白桃"
    // 2: "ロボ玉試作2号機"
    // 3: "ももちゃん"
    // 4: "ロボ玉試作3号機"
    // length: 5

Array.prototype.filter() の使い方

Array.prototype.filter()では、第一引数のCallBackFunction が配列のvalueを一度ずつ呼び出し、CallBackFunction内の条件文に合致するvalueだけの新しい配列(New-Array)を作成します！

なので、条件による配列の値を絞り込みたいときに役立ちます。

filter() メソッドは、与えられた関数によって実装されたテストに合格したすべての配列からなる新しい配列を生成します。
filter() は、与えられた CallBackFunction を配列の各要素に対して一度ずつ呼び出し、
CallBackFunction が true と評価される値を返したすべての要素からなる新しい配列を生成します。
CallBackFunction は値が代入されている配列の index-番号に対してのみ呼び出されます。
つまり、すでに削除された index-番号や、まだ値が代入されていない index-番号に対しては呼び出されません。
CallBackFunction によるテストに合格しなかった配列要素は単純にスキップされ、新しい配列には含まれないだけです。
引用元： MDN: Array.prototype.filter()

MDNを元に、filterメソッドの基本的な機能をまとめると次のようなものになります。

Array.prototype.filter() – 基本的な使い方

構文: const new_array = array.filter((element, index, arr)=> {・・・ 処理文 ・・・});

引数: CallBackFunction: array の各要素に対して実行するテスト関数です。
この関数が true を返した要素は残され、false を返した要素は取り除かれます。

この関数は、次の3つの引数を持ちます

1. element: 現在処理中の要素の値(CurrentValue)です。
2. index (省略可): 配列内の CurrentValue の index-番号です。
3. arr (省略可): filter() を呼び出している配列です。

実行結果(返り値): テストに合格した要素からなる新しい配列(New-Array)です。テストに合格した要素がなかった場合は、空の配列が返されます。

// < Array.prototype.filter() の使い方 >

const projectList = [
    { value: 'ロボ玉試作1号機', group_name: 'ロボ玉組' },
    { value: '白桃', group_name: null },
    { value: 'ロボ玉試作2号機', group_name: 'ロボ玉組' },
    { value: 'ももちゃん', group_name: 'ロボ玉組' },
    { value: 'ロボ玉試作3号機', group_name: null },
];

// 1. filter() で projectList の group_name が「ロボ玉組」な valueだけの配列を作成する！
const robotamaDev = projectList.filter(project => project.group_name === 'ロボ玉組');
console.log({robotamaDev});
// < 出力結果 >
// robotamaDev: Array(3)
    // 0: {value: 'ロボ玉試作1号機', group_name: 'ロボ玉組'}
    // 1: {value: 'ロボ玉試作2号機', group_name: 'ロボ玉組'}
    // 2: {value: 'ももちゃん', group_name: 'ロボ玉組'}
    // length: 3

map() と filter() の使い分け Sample-Code

map() と filter() 使い分けについて、まとめると次のような場合分けができます！

Array.prototype.map()は、既存の配列のvalueすべてをcustomizeした新しい配列が必要な場合
Array.prototype.filter()は、既存の配列のvalueに対して条件を設けて絞り込んだ新しい配列が必要な場合

// < Map-Filter-Method-使い分け >

const projectList = [
    { value: 'ロボ玉試作1号機', group_name: 'ロボ玉組' },
    { value: '白桃', group_name: null },
    { value: 'ロボ玉試作2号機', group_name: 'ロボ玉組' },
    { value: 'ももちゃん', group_name: 'ロボ玉組' },
    { value: 'ロボ玉試作3号機', group_name: null },
];

const robotamaDev = projectList.filter(project => project.group_name === 'ロボ玉組');
console.log({robotamaDev});
// < 出力結果 >
// robotamaDev: Array(3)
    // 0: {value: 'ロボ玉試作1号機', group_name: 'ロボ玉組'}
    // 1: {value: 'ロボ玉試作2号機', group_name: 'ロボ玉組'}
    // 2: {value: 'ももちゃん', group_name: 'ロボ玉組'}
    // length: 3


// map で特定の値だけにして、filter の条件でさらに絞り込む！
const robotamaProject = projectList.map(project => project.group_name).filter(group_name => group_name === 'ロボ玉組');

console.log({robotamaProject});
// < 出力結果 >
// robotamaProject: Array(3)
    // 0: "ロボ玉組"
    // 1: "ロボ玉組"
    // 2: "ロボ玉組"
    // length: 3

// 同じ結果だが、こちらの方が、より効率的 => 最適な処理 => アルゴリズムの最適化！
const robotamaFilter = projectList.filter(project => project.group_name).map(groupExistProject => groupExistProject.group_name);

console.log({robotamaFilter});
// robotamaFilter: (3) ['ロボ玉組', 'ロボ玉組', 'ロボ玉組']