【JavaScript】find()メソッド入門: 配列から条件に合う要素を見つける方法

JavaScriptを学び始めた方には多くのメソッドが存在しており、その使い方や適用場面がわからないかもしれません。今回は、配列の中から条件に合う最初の要素を探し出すfind()メソッドについて、わかりやすく解説します。

「find()」の基本的な使い方

「find()」とは？

find()メソッドは、配列の要素を一つずつチェックして、指定した条件に合致する最初の要素を返すJavaScriptのメソッドです。

例:

const numbers = [1, 2, 3, 4, 5];
const found = numbers.find(element => element > 3);
console.log(found); // 4

この例では、3より大きい最初の数字をfind()で探しています。

「find()」のコールバック関数

find()メソッドに渡すコールバック関数は、3つの引数を受け取ります。

1. 要素の値
2. 要素のインデックス
3. 対象の配列

例:

const numbers = [10, 20, 30, 40, 50];
const found = numbers.find((element, index, array) => element === array[index]);
console.log(found); // 10

「find()」の使用例4パターン

数値の中から特定の条件に合う最初の要素を見つける

const ages = [18, 25, 30, 15, 40];
const adult = ages.find(age => age >= 20);
console.log(adult); // 25

文字列の中から特定の文字を含む最初の要素を探す

const fruits = ["apple", "banana", "cherry", "date"];
const favorite = fruits.find(fruit => fruit.includes("ch"));
console.log(favorite); // "cherry"

オブジェクトの配列から特定のキーの値を持つ要素を見つける

const students = [
  {name: "Taro", age: 20},
  {name: "Jiro", age: 18},
  {name: "Saburo", age: 22}
];
const student = students.find(s => s.name === "Jiro");
console.log(student.name); // "Jiro"

真偽値の配列から最初のtrueを探す

const checks = [false, false, true, false];
const isChecked = checks.find(check => check === true);
console.log(isChecked); // true

「find()」と「findIndex()」

「findIndex()」とは？

findIndex()メソッドは、find()と似ていますが、条件に合致する要素のインデックスを返します。

例:

const colors = ["red", "green", "blue", "yellow"];
const index = colors.findIndex(color => color === "blue");
console.log(index); // 2

「find()」と「findIndex()」の違い

主な違いは、find()が要素そのものを、findIndex()が要素のインデックスを返すことです。

const animals = ["cat", "dog", "bird", "fish"];
const animal = animals.find(a => a === "bird");
const animalIndex = animals.findIndex(a => a === "bird");

console.log(animal); // "bird"
console.log(animalIndex); // 2

「find()」を使用する際の注意点

存在しない要素を探す場合

find()は条件に合致する要素がない場合、undefinedを返します。

const numbers = [1, 2, 3];
const notFound = numbers.find(num => num === 4);
console.log(notFound); // undefined

この時、返り値がundefinedかどうかで要素が存在するかを確認することができます。

「find()」の使い方まとめ

• find()メソッドは配列の要素を一つずつチェックし、条件に合致する最初の要素を返す。
• find()の類似メソッドにfindIndex()があり、これは要素のインデックスを返す。
• 使用時の注意として、条件に合致する要素がない場合undefinedを返すので、返り値をチェックすることが大切です。

これで、find()メソッドの基本的な使い方や注意点を理解することができました！プログラミングの世界にはまだまだ学ぶことが多いですが、一つずつ学んでいくことで、より高度なコードを書くことができるようになります。頑張ってください！