JavaScript mapとfilterとreduceの違い

mapとfilterとreduceの違いのまとめ

	目的	戻り値	元の配列への影響
map	各要素を変換して新しい配列を作る	配列	変更しない
filter	条件に合う要素だけ抽出	配列	変更しない
reduce	配列を1つの値にまとめる次の計算へ渡す「累積値」を返す	任意の型（数値・文字列・配列など）	変更しない

map、filter、reduceは、配列を操作する高階関数の代表です。

mapとは

変換を行います。

配列内のすべての要素に対して指定された関数を実行し、その結果から新しい配列を作成します。配列の形は保たれたまま、中身が変換されます。

構文

array.map( callback( currentValue, index, array ), thisArg )

１．引数1つ(currentValue)の例

<script>
const nums = [1, 2, 3, 4, 5];

// map：要素を2倍に変換
const mapped = nums.map(n => n * 2);
console.log(mapped); // [2, 4, 6, 8, 10]

</script>

nは「currentValue（今の要素）」です。

２．引数2つ(currentValue、index)の例

<script>
const nums = [1, 2, 3, 4, 5];

const mapped = nums.map((value, index) => {
  return value + index;
});
console.log(mapped); // [1, 3, 5, 7, 9]

</script>

indexを利用すると、位置に応じた処理ができます。

３．引数3つ(currentValue、index、array)の例

<script>
const nums = [1, 2, 3];

const mapped = nums.map((value, index, array) => {
  return value * array.length;
});
console.log(mapped); // [3, 6, 9]

</script>

arrayには、map()に渡された元の配列（nums）がそのまま入ります。

filterとは

絞り込みを行います。

配列内の各要素に対して指定された関数（条件）を実行し、その関数がtrueを返した要素だけを集めて新しい配列を作成します。

構文

array.filter( callback( currentValue, index, array ), thisArg )

１．引数1つ(currentValue)の例

<script>
const nums = [1, 2, 3, 4, 5];

// filter：偶数のみ抽出
const filtered = nums.filter(n => n % 2 === 0); // [2, 4]
console.log(filtered); // [2, 4]

</script>

nは各要素（1,2,3,4,5）になります。

２．引数2つ(currentValue、index)の例

<script>
const nums = [10, 20, 30, 40];

const filtered = nums.filter((value, index) => {
  return index % 2 === 0; // 偶数番目の要素だけ残す
});
console.log(filtered); // [10, 30]

</script>

indexを利用すると、位置に応じた処理ができます。

３．引数3つ(currentValue、index、array)の例

<script>
const nums = [3, 7, 10];

const filtered = nums.filter((value, index, array) => {
  return value > 5 + array.length;
});
console.log(filtered); // [10]

</script>

arrayには元の配列（nums）が渡されます。

reduceとは

集約を行います。

配列のすべての要素に対して累積的な操作を適用し、単一の値を返します。

この操作は、前の要素の計算結果と現在の要素を組み合わせて実行されます。

構文

array.reduce( callback(accumulator, currentValue, index, array), initialValue )

<script>
const nums = [1, 2, 3, 4, 5];

// reduce：合計値を算出
const reduced = nums.reduce((sum, n) => sum + n, 0);
console.log(reduced); // 15

</script>

sumは累積値です。最初は0で次から前回の合計になります。
nは配列の各要素です。