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

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

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

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

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

Array.prototype.forEach() の使い方

Array.prototype.forEach() は、第一引数にCallBackFunctionを取ります。

そして、そのCallBackFunction内で配列のvalueを1つずつ先頭から取り出して、処理をすることができます！

簡単に言うと「配列の中身をすべて取り出すfor文」をより簡単にしてくれたArrayメソッドです。

「配列の中身をすべて取り出す」ことが目的のArrayメソッドなので実行結果の返り値は「 undefined 」です。

forEach() メソッドは、与えられた関数を、配列の各要素に対して一度ずつ実行します。
forEach() は、与えられた関数 CallBackFunction を配列に含まれる各要素に対して一度ずつ、昇順で呼び出します。
引用元： MDN:Array.prototype.forEach()

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

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

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

引数: CallBackFunction: 各要素に対して実行されるコールバック関数です。
この関数は、次の3つの引数を持ちます

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

実行結果(返り値): 返り値は、undefined です。

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

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

const fromData = 'グンマー帝国';

// 1. projectList に「 from: fromData 」(key: vallue)を追加したい！
const forEachReturn = projectList.forEach(project => project.from = fromData);

// 2. Array.prototype.forEach() の実行結果は「 undefined 」
console.log({forEachReturn});
// {forEachReturn: undefined}

// 3. forEach()で加工した結果
console.log({projectList});
// < 出力結果 >
// projectList: Array(5)
    // 0: {value: 'ロボ玉試作1号機', group_name: 'ロボ玉組', from: 'グンマー帝国'}
    // 1: {value: '白桃', group_name: null, from: 'グンマー帝国'}
    // 2: {value: 'ロボ玉試作2号機', group_name: 'ロボ玉組', from: 'グンマー帝国'}
    // 3: {value: 'ももちゃん', group_name: 'ロボ玉組', from: 'グンマー帝国'}
    // 4: {value: 'ロボ玉試作3号機', group_name: null, from: 'グンマー帝国'}
    // length: 5

Array.prototype.map() の使い方

Array.prototype.map()は、第一引数にCallBackFunctionを取ります。

そして、そのCallBackFunction内で配列のvalueを1つずつ先頭から取り出して、処理をすることができます！

ここまでは、Array.prototype.forEach() と同じです。

Array.prototype.forEach() と違うのは、実行結果である返り値です。

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

このように、Array.prototype.map()では実行結果である返り値が、新しい配列(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

forEach() と map() 使い分け Sample-Code-全文

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

Array.prototype.forEach()は、既存の配列のvalueすべてに何かしらの加工処理をしたい場合
Array.prototype.map()は、既存の配列のvalueすべてをcustomizeした新しい配列が必要な場合

// < forEach-map-Method-使い分け >

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

const fromData = 'グンマー帝国';

// 1. projectList に「 from: fromData 」(key: vallue)を追加
const forEachReturn = projectList.forEach(project => project.from = fromData);

console.log({forEachReturn});
// {forEachReturn: undefined}

console.log({projectList});
// < 出力結果 >
// projectList: Array(5)
    // 0: {value: 'ロボ玉試作1号機', group_name: 'ロボ玉組', from: 'グンマー帝国'}
    // 1: {value: '白桃', group_name: null, from: 'グンマー帝国'}
    // 2: {value: 'ロボ玉試作2号機', group_name: 'ロボ玉組', from: 'グンマー帝国'}
    // 3: {value: 'ももちゃん', group_name: 'ロボ玉組', from: 'グンマー帝国'}
    // 4: {value: 'ロボ玉試作3号機', group_name: null, from: 'グンマー帝国'}
    // length: 5


// 2. 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