JavaScriptのmap(), filter(), reduce()をちゃんと理解する。

モチベーション

最近、Next.jsを学び始めました。その際に、APIからfetchしたデータを表示する時など、map()やfilter()を使うことがあり、自分自身ちゃんと理解していないと感じました。なので調べたことをまとめます。

まずはアロー関数

map(), filter(), reduce()を使うにあたり、アロー関数を使います。=>を使ったアレですね。

MDNの公式ドキュメントによると、「アロー関数式は、より短く記述できる、通常の function 式の代替構文です。また、this, arguments, super, new.target を束縛しません。アロー関数式は、メソッドでない関数に最適で、コンストラクタとして使うことはできません。」とあります。

ようするに、functionを簡易に記載する方法ですね。

例えば2つの引数を受けて合計するというfunctionがあるとします。

const addWithFunction  = function(x, y) {
	return x + y;
}

addWithFunction(1, 2) //3

functionを使った、まずはじめに学ぶ基本的な関数の記法です。

アロー関数を使うことで、簡略化して書いてみます。

const addWithAllow = (x, y) => {
	return x + y;
}

addWithAllow(1, 2) //3

functionが省略され、 =>という部分が追加されました。=>は関数内での処理部分を示すようです。

さらに処理部分が上記のようにreturnの1行だけ、のような場合、{}も省略できます。

const addWithAllowAbbre = (x, y) => x + y;

addWithAllowAbbre(1, 2) //3

注意するのは、returnがあるとUncaught SyntaxError: Unexpected token returnになることです。

引数がない場合でも()は必要なので

const test = () => console.log('test');

のようになります。

アロー関数が理解できたところで、map()から見ていきましょう。

map

MDN公式ドキュメントのmapのページでは、「map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。」とあります。写像ですね。

例えば、APIから配列としてデータを全件取得して、それらをレンダリングさせるといったことがWeb開発では多いと思います。そんなときはmap()を使います。

簡易な例として、「1から10までの数字を全て2倍する」ということを考えてみます。

const nums = [...Array(10)];
nums.map((v, i) => i+1).map((i) => i*2); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

まず1から10の数字が格納された配列をmap()を使って生成し、再度map()で2倍しています。

filter

次にfilter()です。MDNの公式ドキュメントでは「引数として与えられたテスト関数を各配列要素に対して実行し、それに合格したすべての配列要素からなる新しい配列を生成します。」とあります。

僕がnext.jsを学んでいて生じた用途としては、ページネーションで、現在表示しているページは非表示にするというものでした。

再度、簡単な例を考えてみます。「1~ 10までの数字のうち、奇数のみを取り出す」としましょう。

const nums = [...Array(10)];
nums.map((v, i) => i+1).filter((i) => i%2 != 0); // [1, 3, 5, 7, 9]

ちゃんと条件に合致した数字のみを取り出して配列を生成しています。

reduce

最後にreduce()を見ましょう。
MDNでは「reduce() は配列の各要素に対して（引数で与えられた）reducer 関数を実行して、単一の値にします。」とあります。

map()との違いは、map()は全要素に対してある処理をした結果を配列として返却するのに対し、reduce()はある配列の全要素を処理した結果を単一の値として返却することです。

例えば、「1 ~ 10までの数を合計した値を求める」ことを考えます。

const nums = [...Array(10)];
nums.map((v, i) => i+1).reduce((a, b) => a+b); // 55

はじめにa, bには1, 2が入り 1+2で3となります。次にその3と、配列に格納されていた3が入り6になり・・・と処理をしていくようです。

まとめ

はじめにアロー関数について学びました。
次にmap(), filter(), reduce()について概要と例を見ました。

これらの関数は非常によく使うとのことなので、処理の仕方をちゃんと理解し、日々のコーディングに活かしていきたいですね。

ご指摘や間違いがあるようでしたら、コメントをいただけると非常に嬉しいです！