【今日のQ&A】条件に合うものを配列から抽出する【JavaScript】

こんにちは、@codeship_techです。

今日の授業ではこんな質問がありました!

皆さんもぜひ一緒に考えて解説をインプットしてみてください!

filter関数って何ですか?

配列から特定の条件に合うもののみ抽出して新しい配列を作る関数です。

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

JavaScriptのES6から追加された、mapなどと同じ配列操作に便利な関数の一つです。
map関数について、こちらで簡単に解説しています!

【今日のQ&A】関数を用いた配列処理【JavaScript】(新規タブで開く)

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点を超えた答案のみ取得
  • 全ユーザーのうちログインしているユーザーのみ取得名前付き関数を使う目的


Q. mapもfilterも、forループで書けるのに何故このような書き方をするのですか?

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

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

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

  • この処理はfilterを使っているから何かをふるい分けしているんだな
  • この処理はmapを使っているから元の配列に何か変更を加えるんだな

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

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

授業日記についてのご意見

CodeShipの授業について「こんな事が知りたい・紹介して」というご意見・ご提案がありましたら、CodeShip公式Twitterアカウント(【CodeShip】プログラミングスクール)までDMまたはリプライにてお寄せください。