【JavaScript】配列で条件に合う値を取得！findメソッドの使い方

本記事はJavaScript（以降JS）の配列を扱うときに使うfindメソッドについてサンプルのコード用いて使い方と注意点を解説します

配列に対して使うfindメソッドで何ができるんだろう？？

結論から先に言うと、findメソッドを使うことである配列の中で条件を設定し、その条件にあった最初の値を一つ取得することができます。

findメソッドの基本的な使い方

まずはアロー関数を用いたバージョンです。

const scores = [10, 20, 40, 30, 60];
const findMethod = scores.find((cur) => cur >= 35)
console.log(findMethod) //👉　40

次はアロー関数を用いないバージョンです。

const scores = [10, 20, 40, 30, 60];
const findMethod = scores.find(function(cur){
 return cur >= 35;
});
console.log(findMethod) //👉　40

実行すると40が返ってきます。

findメソッドを使うには「配列」と「条件」を用意します。
今回の例では配列は「[10, 20, 40, 30, 60]」、条件は「cur >= 35」です。

今回のサンプルは「配列の中の値を順番に確認し、35以上の条件に合う最初の値を取得する」という内容です。
つまり40です。

わかりやすくするために流れを書きます。

前提：対象の配列は[10, 20, 40, 30, 60]で、条件は「35以上の数字」である

①最初に10が入るが、不採用🙅‍♂️（35以下の数字だから）
↓
②次に20が入るが、不採用🙅‍♂️（35以下の数字だから）
↓
③次に40が入り、35以上の数字であり条件を満たし、採用🙆‍♂️
↓
④値が見つかったので終了。
ということで40が返ってきます。

findメソッド使用時の注意点は条件に合う値を全て取り出すのではなく、最初の一つだけの取得になります。

今回の例では60も条件を満たしますが、すでに条件を満たす数字「40」が見つかってしまったので60を確認する前に関数は終了します。

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)

//上の内容をarrow関数なしで書くとこうなります。↓
const findMember = members.find(function (member) {
  return member.old === 17;
});
console.log(findMember);

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

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

このようにいろんな情報（オブジェクト）が入った配列データの中からある一つの情報を取得したい時に使うのが有効的です。
実際にJSONデータと組み合わせて使われることが多いです。

条件に合う要素がなければundefinedが返ってくる

条件に合う要素がない時は「undefined」が返ってきます。

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.height >= 185)
console.log(findMember)

この時の実行結果は、
undefinedとなります。

条件が「heightの値が185以上」ですが、今のmembersの配列内のオブジェクトで該当するデータがないからです。

findメソッドは第２、第３引数を持てる

結論だけお伝えすると、findメソッドで第２、第３引数を設定して使うことは滅多にないです。（個人的にも一度も使ったことはありません）

一応サラッとだけ書いておきます。

第１引数：配列の各要素 ← 今回のサンプルでだとcurやmember
第２引数：配列の要素番号
第３引数：チェックする配列そのもの

実際にサンプルコードでチェックしてみましょう。

const scores = [10, 20, 40];
const findMethod = scores.find((cur, index, array) =>
  console.log(cur, index, array)
);

結果はこのように返ってきます。

10, 0, [10, 20, 40]
20, 1, [10, 20, 40]
40, 2, [10, 20, 40]

今回の例では条件を設定していないため、配列の数だけ実行されます。つまり３回です。
各行の１番最初の数字は、配列の各値です。配列の中身の順番通り10→20→40と出ていますね。

各行の２番目の数字は、配列の各値の順番です。一行目は一番最初の配列の値である10を使っているから「0」。二行目は配列の二番目の値である20を使っているから「1」。三行目は最後の配列の値の40を使っているから三番目の「2」が出力されます。

各行の最後は全て同じで[10,20,40]が出てきます。これは第３引数はチェックする配列自信を指すので、今回は[10,20,40]の配列を使っているので、毎回同じものが出力されると言うわけです。

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