【JavaScript】find関数を使おう!【配列】

JavaScript

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

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

JavaScriptの解説シリーズです。

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

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

この記事を読むと・・・
  • find関数が使えるようになる

find関数を使おう

find関数とは

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

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

■構文

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

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

1つだけしか要素を取得できないのがポイントだよ!
条件の合う全ての要素を取得したい人はfilter関数を使おう!

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

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

ここでは、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 },
];

//                  配列     .find((変数) => 条件式※trueの最初の要素をreturn);
const result = userList.find((user) => user.age == 29);
console.log(result);

【出力結果】

{ name: 'サメハック', id: 'A001', age: 29 },

このように条件に合致する最初の要素を取得することが出来ました。

{ name: “ぶたハック”, id: “A004”, age: 29 }
こちらの要素が取得されていないことからも、
最初の要素のみが取得されることがわかると思います。

煩わしいfor文などを使わなくてもよく、可読性も高いので
積極的に使っていきましょう。

配列のfind関数が理解出来てえらい!

まとめ

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

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

タイトルとURLをコピーしました