【JavaScript】filter関数を使おう！【配列の操作】

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
現在正社員として5年働いたのちフリーランスとして独立しました。

JavaScriptの解説シリーズです。

今回はfilter関数について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

filter関数が使えるようになる

filter関数を使おう
1. filter関数とは
2. 実際に処理を作ってみよう！
まとめ

filter関数を使おう

filter関数とは

filter関数とは、配列の中から条件の合う要素を取り出す関数です。

【JavaScript】配列の作り方【array】

この記事を読むと・・・配列の作り方がわかる配列のデータの取得ができる配列とオブジェクトの違いがわかる

■構文

配列.filter((変数) => 条件式);

このように記述することで配列の中身を1つずつ順番に取り出し、
条件式に合致する要素だけをリターンすることができます。

このように配列の中身を１つずつ再帰的に取り出す処理をコールバック関数というよ！
見た目が特殊だけどやっていることはfor-of文と同じ処理だよ！

実際に処理を作ってみよう！

ここでは、userListという配列の中身を1つずつ取り出し、
ageプロパティが29の要素を取得します。

// ユーザリストの宣言
const userList = [
  //key  : value
  { name: "サメハック", id: "A001", age: 29 },
  { name: "ねこハック", id: "A002", age: 31 },
  { name: "いぬハック", id: "A003", age: 40 },
  { name: "ぶたハック", id: "A004", age: 29 },
];

//                  配列     .filter((変数) => 条件式※trueのものをreturn);
const newUserList = userList.filter((user) => user.age == 29);

【出力結果】

[
  { name: 'サメハック', id: 'A001', age: 29 },
  { name: 'ぶたハック', id: 'A004', age: 29 }
]

このように条件に合致する要素を取得することが出来ました。
煩わしいfor文などを使わなくてもよく、可読性も高いので
積極的に使っていきましょう。

配列のfilter関数が理解出来てえらい！

まとめ

filter・・・配列の中から条件の合う要素を取り出す関数
配列.filter((変数) => 条件式);

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram