JavaScriptで配列の要素を探して取得する方法！(findメソッド)

JavaScriptでfindメソッドを使用して、配列の要素を探して取得する方法について書いています。
findメソッドは見つけた最初の要素を返してくれます。

簡単なサンプルコードと解説を載せています。

findメソッドの使い方

findメソッドを使用すると、配列の要素を探して一番最初に見つかった要素を取得します。
例えば、下記のように使用します。

const scores = [10, 25, 30, 45, 77]
const result = scores.find((score) => { return score > 20 })

console.log(result) // 25が出力される

scoresに数値が配列で入っています。
scores配列からfindメソッドを使用して、値が20を超えているものを探しています。

findメソッドの引数には、条件を比較する関数を書きます。
scoreには、配列の値がひとつずつ入ってきて比較されます。比較した結果、最初に条件に合うものが返ります。
結果として、上記の例では「25」が出力されます。

アロー関数で書きましたが、下記のように無名関数を指定することも、もちろん可能です。

const scores = [10, 25, 30, 45, 77]
const result = scores.find(function (score) { return score > 20 })

console.log(result) // 25が出力される

オブジェクトを探す

オブジェクトの配列の要素を探すことも可能です。
下記のように使用します。

const fruits = [
  { name:'apple', color: 'red' },
  { name:'banana', color: 'yello' },
  { name:'grape', color: 'blue' }
];

const compareColorYello = (fruit) => {
  return fruit.color === 'yello'
}

const result = fruits.find(compareColorYello)
console.log(result) // {name: 'banana', color: 'yello'}が出力される

今回は果物のオブジェクトを配列に複数定義しました。
nameに果物の色をもっていて、colorが果物の色です。

色が黄色のものを探して、返すようにしました。
compareColorYelloという比較関数を書いています。
この中で果物の色が黄色(fruit.color === 'yello')の条件と会っていたら返しています。

fruits配列のfindメソッドの引数に作成した比較関数を渡しています。
結果、resultには「{name: 'banana', color: 'yello'}」のオブジェクトが取り出されます。

要素が複数ある場合は？

要素が複数ある場合でも、最初のひとつが返ってくるようになっています。
例えば下記のような場合です。

const fruits = [
  { name:'apple', color: 'red' },
  { name:'banana', color: 'yello' },
  { name:'sstrawberryt', color: 'red' },
  { name:'grape', color: 'blue' }
];

const compareColorRed = (fruit) => {
  return fruit.color === 'red'
}

const result = fruits.find(compareColorRed)
console.log(result) // {name: 'apple', color: 'red'}が出力される

fruitsのオブジェクト配列には色(color)が赤(red)のオブジェクトが２つあります。
compareColorRedで色が赤のオブジェクトを探して返すようにしています。

この場合は最初に見つかったappleのみが返ってきます。

要素が見つからない場合は？

要素が見つからない場合は、undefinedが返ってきます。

const fruits = ["apple", "banana", "lemon"]
const result = fruits.find(function (fruit) { return fruit === "orange" })

console.log(result) // undefinedが出力される

上記では、fruits配列に格納した文字列と同じものを返すようにしてみました。
条件の箇所が「fruit === "orange"」となっていますが、該当するものがないためundefinedが返ります。

他の引数について

findメソッドに渡せる他の引数は、下記のようになっています。

const fruits = [
  { name:'apple', color: 'red' },
  { name:'banana', color: 'yello' },
  { name:'grape', color: 'blue' }
];

fruits.find((fruit, index, elements) => {
   console.log(fruit, index, elements)
})

上記を試してみると、3回(要素分)出力されます。
fruitには配列の要素、indexには配列番号、elementsはfruitsの内容がそのまま入ります。

基本的には第2・第3引数は使わずに使用することが多いのではないでしょうか。
既に配列にある要素と比較する場合などに使ったりするのかなと思います。