【5分で理解① (配列編)】JavaScriptの配列のfindメソッド基本理解

こんにちは。
大阪でフロントエンド兼マネージャー兼Webチームの採用担当をしている筆者です😃

今回からJavaScriptの配列でよく使うメソッドについてシリーズにして紹介していきます。
合計７つの記事を書く予定です。

JavaScript（以下JS）を理解する上で配列は必須の項目です。
配列には多くのメソッドがあり、それらは便利でコードの可読性を上げてくれるのですが、覚えるのが大変です。
私自身も覚えるのに苦労しましたが、使えるようになるとJSの表現幅？が広がったと感じます。

各記事さっと理解できるよう５分ほどで読めるようにまとめて書いていきます。
たった７つです。忘れた時にいつでも戻ってきてください。

では、、
第一弾の今回はfindメソッドを紹介します。

find()の基本文法

const scores = [10, 20, 40, 30, 60];

const findGrammer = scores.find((cur) => cur >= 35)
console.log(findGrammer) //👉　40

実行すると40が返ってきます。
curには配列内の数字が順番に入り、条件文（cur >= 35）を満たす数字が見つかるまで配列内の数字を入れ続けます。

例えば条件文が「35以上の数字」であれば、
最初は10が入るが、🙅‍♂️
次に20が入るが、🙅‍♂️
次に40が入り、35以上の数字であり条件を満たし、🙆‍♂️
ということで40が返ってきます。

60も条件を満たしますが、すでに条件を満たす数字（４０）が見つかってしまったので60はアウト。

find()には第2引数、第3引数も入れる事ができますが今回は割愛します。

find()は何をしてくれる？

findメソッドは文字通り配列の中から条件にあったデータを見つけ出します。

const members = [
  { name: 'Natsumi', old: 21, gender: 'female', height: 158 },
  { name: 'Takashi', old: 18, gender: 'male', height: 180 },
  { name: 'Hitomi', old: 17, gender: 'female', height: 163 },
  { name: 'Jun', old: 32, gender: 'male', height: 165 },
];

const findMember = members.find((member) => member.old === 17)
console.log(findMember)

実施結果は、
{ name: ‘Hitomi’, old: 17, gender: ‘female’, height: 163 }
となります。

これは、「member.old === 17」の条件と一致しているデータを持ってきています。

find()は最初の一つの要素しか見つけられない

注意点としてfind()で指定した条件が複数の要素で満たされている時は最初の１つしか抽出されません。

const findMember = members.find((member) => member.gender === 'male')

この時の実行結果は、
{ name: ‘Takashi’, old: 18, gender: ‘male’, height: 180 }
となります。
{ name: ‘Jun’, old: 32, gender: ‘male’, height: 165 }も条件に当てはまりますが２番目の要素なので省かれてしまいます。

今回は以上となります。
皆さんのJSの理解に繋がっていれば幸いです。
では！

▼▼あわせて読みたいの記事▼▼