findとfindIndexメソッド | 配列の探索と操作 | JavaScript 超完全入門 基本から発展までのすべて

findメソッドとは？

findメソッドは、JavaScriptの配列において、条件に合致する最初の要素を返すためのメソッドです。指定された条件を満たす最初の要素が見つかると、その要素が返され、見つからない場合はundefinedが返されます。

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

const numbers = [5, 12, 8, 130, 44];

// 最初に見つかった10より大きい要素を返す
const found = numbers.find(function(num) {
    return num > 10;
});

console.log(found);  // 12

この例では、配列numbersから最初に条件を満たす要素12が返されています。

findIndexメソッドとは？

findIndexメソッドは、findメソッドに似ていますが、条件に合致する要素のインデックスを返します。条件を満たす要素が見つかると、その要素のインデックスが返され、見つからない場合は-1が返されます。

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

const numbers = [5, 12, 8, 130, 44];

// 最初に見つかった10より大きい要素のインデックスを返す
const index = numbers.findIndex(function(num) {
    return num > 10;
});

console.log(index);  // 1

この例では、numbers配列の中で最初に条件を満たす要素12のインデックス1が返されています。

findとfindIndexメソッドの違い

findメソッドは、条件に合致する最初の要素そのものを返すのに対して、findIndexメソッドはその要素のインデックスを返します。どちらも最初に条件を満たす要素にのみ適用されます。

実用例

次に、実際の利用シーンを想定した例を示します。

オブジェクトの配列から特定のプロパティを持つ要素を検索する

const users = [
    { id: 1, name: "John" },
    { id: 2, name: "Jane" },
    { id: 3, name: "Jack" }
];

// idが2のユーザーを検索する
const user = users.find(function(user) {
    return user.id === 2;
});

console.log(user);  // { id: 2, name: "Jane" }

この例では、users配列の中から、idが2のユーザーを検索し、そのオブジェクトを返しています。

まとめ

findおよびfindIndexメソッドは、配列から特定の条件に合致する要素を検索するための強力なツールです。findは要素そのものを返し、findIndexはその要素のインデックスを返すため、必要に応じて使い分けることが重要です。条件に合致する最初の要素だけを処理したい場合に、これらのメソッドを使用することで、効率的に配列操作を行うことができます。