【JavaScript】filter関数の使用方法

filterについて

filterは配列の内容を指定した条件で絞り込む関数です。
配列の要素一つ一つを判定し、関数内でtrueが返ってきたもののみを抽出することができます。
また、この関数はArrayオブジェクトが持っている関数なので、配列に対してしか使用できません。

説明だけでは分かりづらいかもしれないので、使用例などを交えて解説させていただきます！

filterの使用方法

使用方法は以下のようになります。
配列の値を、foreachのように一つずつ関数内の式で判定していきます。
判定でtrueになった場合だけ、新しく用意した配列に格納されます！

array = []
const newArray = array.filter(value => {
})

例１：そのまま使用した場合

const array = [1, 2, 3, 4, 5]
const newArray = array.filter(value => {
    return value > 3
})

console.log(newArray)

// 出力結果
> [4, 5]

例2：filter内に別の判定を入れる

またfilter関数内に、if文を書いてさらに細かく絞り込むことも可能です。
以下のコードは、値が偶数のものは除外し、その中で2以上の値だけを抽出しています。

const array = [1, 2, 3, 4, 5]
const newArray = array.filter(value => {
  if (value % 2 === 0) {
    return false
  }
  return value >= 2
})

console.log(newArray)

// 出力結果
> [3, 5]

例３：省略して記述

return時にtrue or falseを返せばいいので、一行のアロー関数で書く場合はreturnは不要です。

const hoge = array.filter(value => value > 3)

まとめ

• filterは配列の内容を指定した条件で絞り込む関数
• trueで返ってきた要素のみを抽出する
• filter内でif文を使用して、細かく絞り込むことも可能

おわり

今回はJavascriptのfilter関数について解説させていただきました。
普段はロジックの作成などの記事を書いているので、こういった一つの関数に絞った記事を書くのもいいですね！

最後まで記事を見てくださりありがとうございました。
誤字や脱字、コードのリファクタリングできる箇所などがありましたらコメントくださるとありがたいです!
また、いいねをしてくださると、筆者が喜びます:)