filter関数で、配列から特定の条件に合うものだけを抽出して新しい配列を作る

はじめに

JavaScriptのES5から新規に追加されたfilter関数について、その使い方とどんな用途例があるかを簡単にまとめてみました。

filterとはその名の通り「フィルター」のことで、
配列のうち条件に当てはまるものと当てはまらないものを、ふるい分けして要素数を減らす関数です。

同じくES5から実装されたmap関数同様に配列操作に便利な関数の一つだと思ってもらえればいいかと思います。

map関数についてはこちらで簡単にまとめています。

【JavaScript】map関数を用いたおしゃれな配列処理

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を使うとこのようなことができる。

一つは読みやすく修正しやすいコードのために、「共通の合言葉」として使う目的がある。

filter関数が行なっている処理の実装自体は、その通りforEach文などでも同じ処理を書くことができる。
これはmap関数でも同様。

しかしmapやfilterなどを適切に使うことによって、コードの読み手(書き手ではなく)が

と、コードを一目見ただけで実装の意味をざっくりと判別できるようになる。

関数特有の名前・処理は、filterやmapの挙動を知っている人たちの間でのある種「共通の合言葉」の代わりになり、読み手のスピーディな理解の手助けになる。

この記事は「CodeShip」内での実際の質疑応答や指導・アドバイスの一部を基に作成しています。