filter関数で、配列から特定の条件に合うものだけを抽出して新しい配列を作る
はじめに
JavaScriptのES5から新規に追加されたfilter関数について、その使い方とどんな用途例があるかを簡単にまとめてみました。
filterとはその名の通り「フィルター」のことで、
配列のうち条件に当てはまるものと当てはまらないものを、ふるい分けして要素数を減らす関数です。
同じくES5から実装されたmap関数同様に配列操作に便利な関数の一つだと思ってもらえればいいかと思います。
map関数についてはこちらで簡単にまとめています。
filter関数を使ったふるい分けの例
filter関数を使って、数値の配列から奇数のものだけふるい分けしてみた例。
filter関数の使用例
const array = [1,2,3,4,5,6,7,8];
const newArray = array.filter( function ( x ) {
return x % 2 == 1;
} )
console.log(newArray); //[1,3,5,7]
- filterには引数として関数を与えるが、今回は function(x) と、xを引数とする即時関数を作って与えた。
- x にはarrayの各要素が順番に代入される。1,2,3が順番に代入。
- function (x) の中では、 return x % 2 == 1 と、「要素xが奇数かどうか」のtrueかfalseかを返している。trueになったものが残り、falseになったものは破棄。これにより奇数である1,3,5,7が残り、2,4,6,8は取り除かれた。
用途例
Filterを使うとこのようなことができる。
- 全商品データの配列から、商品名が「あ」で始まるもののみ取得
- 学校の試験データから、合計80点を超えた答案のみ取得
- 全ユーザーのうちログインしているユーザーのみ取得名前付き関数を使う目的
mapもfilterも、forループで書けるのに何故このような書き方をするのか？
一つは読みやすく修正しやすいコードのために、「共通の合言葉」として使う目的がある。
filter関数が行なっている処理の実装自体は、その通りforEach文などでも同じ処理を書くことができる。
これはmap関数でも同様。
しかしmapやfilterなどを適切に使うことによって、コードの読み手(書き手ではなく)が
- 「この処理はfilterを使っているから何かをふるい分けしているんだな」
- 「この処理はmapを使っているから元の配列に何か変更を加えるんだな」
と、コードを一目見ただけで実装の意味をざっくりと判別できるようになる。
関数特有の名前・処理は、filterやmapの挙動を知っている人たちの間でのある種「共通の合言葉」の代わりになり、読み手のスピーディな理解の手助けになる。
参考
この記事は「CodeShip」内での実際の質疑応答や指導・アドバイスの一部を基に作成しています。