概要
find()は Array インスタンスのメソッドで、与えられた関数を配列の各要素に対して順に実行し、条件を満たす最初の要素を返すメソッドです。
条件を満たす要素が存在しない場合はundefinedを返します。
※mdn web docs
つまり、
配列の中から「条件に一致する最初の1要素」を探し出して返すメソッドです。
このメソッドは、元の配列を変更せず、要素（または undefined）を返します。
目次
基本構文
配列 numbers の中から、3より大きい最初の要素を取得しています。
const numbers = [1, 2, 3, 4, 5];
const result = numbers.find(num => num > 3);
console.log(result);
// 出力結果 4
- 条件に一致する要素が見つかった時点で探索を終了
- 見つからない場合は
undefinedを返す
for...of文とfindメソッドの比較
for...of文
const numbers = [1, 2, 3, 4, 5];
let result;
for (const num of numbers) {
if (num > 3) {
result = num;
break;
}
}
console.log(result);
// 出力結果 4
findメソッド
const numbers = [1, 2, 3, 4, 5];
const result = numbers.find(num => num > 3);
console.log(result);
// 出力結果 4
比較結果
コードの簡潔さ
-
for...of文
条件分岐やbreakの記述が必要で、やや手続き的です。 -
findメソッド
「探す条件」を関数として渡すだけで、コードが簡潔になります。
不変性
-
for...of文
外部変数への代入が必要で、状態管理に注意が必要です。 -
findメソッド
元の配列を変更せず、結果のみを返します。
関数型プログラミングのスタイル
-
for...of文
命令型（どのように探すかを逐一記述） -
findメソッド
宣言型（「何を探すか」を記述）
活用例
オブジェクト配列から特定データを取得する例
配列 members の中から、id が 3 の要素を取得しています。
const members = [
{ id: 1, name: "Aileen" },
{ id: 2, name: "Bob" },
{ id: 3, name: "Cindy" },
{ id: 4, name: "David" }
];
const member = members.find(item => item.id === 3);
console.log(member);
// 出力結果 { id: 3, name: "Cindy" }
このように find は、
- 配列の中から 1件だけ取得したい
-
filterのように配列で返す必要がない
といったケースに適しています。