【JavaScript】findメソッドの「使い方」などをわかりやすく解説！

この記事ではJavaScriptの『findメソッド』について、

  • findメソッドとは
  • findメソッドの構文
  • findメソッドの使い方
    • 配列内のオブジェクトをプロパティの値で検索する
  • findメソッドの特徴
    • 配列の先頭の要素からテスト関数を実行し、最初に見つかった要素を返す
    • テスト関数を満たす要素が見つからない場合には、undefinedを返す
    • テスト関数が一度でも該当の要素を見つければ、配列の反復処理が終了する
    • 空のスロットはundefinedと同じように扱われる

などをサンプルコードを用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。

findメソッドとは

findメソッドは、配列内の要素に対してテスト関数を用いて検索し、最初に見つかった要素を返すメソッドです。

後ほどfindメソッドの構文や使い方について詳しく説明しますが、まず以下に示す簡単なサンプルコードを見てみましょう。

const arr = [1, 2, 3, 4, 5];
const found = arr.find((element) => element > 2);
console.log(found);
// ログ出力
// 3

上記のサンプルコードでは、配列arrの各要素に対してテスト関数を用いて検索し、最初に見つかった「2」より大きい要素(上記のサンプルコードでは「3」)を返しています。

補足

findメソッドはES6(ECMAScript 2015)の仕様で追加されました。

findメソッドの構文

findメソッドの構文を以下に示します。

findメソッドの構文

array.find(callbackFn[, thisArg])

arrayは検索対象の配列です。findメソッドの引数と返り値を以下に示します。

引数

  • callbackFn
    • 配列の各要素に対して実行するテスト関数です。
    • テスト関数には以下の引数を渡すことができます(第1引数のelementのみを渡して使用することが多いです)。
      • element: テスト実行中の要素
      • index: テスト実行中の要素のインデックス
      • array: findメソッドでテストしている配列
  • thisArg(省略可能)
    • callbackFnを実行する際にthisとして使用される値です。

返り値(戻り値)

  • テスト関数(callbackFn)が見つけた最初の要素を返します。見つからなかった場合にはundefinedが返されます。

findメソッドの使い方

findメソッドについて、以下に示している使い方をこれから説明します。

  • 配列内のオブジェクトをプロパティの値で検索する

上記の使い方について順番に説明します。

配列内のオブジェクトをプロパティの値で検索する

以下のサンプルコードでは、personsというオブジェクトの配列があります。findメソッドは、idプロパティが2であるオブジェクトを検索しています。結果として、該当する最初のオブジェクトが返されます。

const persons = [
  { id: 1, name: 'Taro', age: 30 },
  { id: 2, name: 'Hanako', age: 25 },
  { id: 3, name: 'Ken', age: 35 },
];
const foundPerson = persons.find((person) => person.id === 2);
console.log(foundPerson);
// ログ出力
// { id: 2, name: 'Hanako', age: 25 }

findメソッドの特徴

findメソッドの特徴を以下に示します。

  • 配列の先頭の要素からテスト関数を実行し、最初に見つかった要素を返す
  • テスト関数を満たす要素が見つからない場合には、undefinedを返す
  • テスト関数が一度でも該当の要素を見つければ、配列の反復処理が終了する
  • 空のスロットはundefinedと同じように扱われる

各特長について順番に説明します。

配列の先頭の要素からテスト関数を実行し、最初に見つかった要素を返す

findメソッドは配列の先頭の要素からテスト関数を実行し、最初に見つかった要素を返します。サンプルコードを以下に示します。

const arr = [1, 2, 3, 4, 5];
const found = arr.find((element) => element > 2);
console.log(found);
// ログ出力
// 3

上記のサンプルコードから分かるように、テスト関数を満たす要素が複数存在する場合でも、findメソッドでは最初に見つけた要素のみを返します。

テスト関数を満たす要素が見つからない場合には、undefinedを返す

findメソッドはテスト関数を満たす要素が見つからない場合には、undefinedを返します。サンプルコードを以下に示します。

const arr = [1, 2, 3, 4, 5];
const found = arr.find((element) => element > 10);
console.log(found);
// ログ出力
// undefined

上記のサンプルコードは、10より大きい要素を検索していますが、そのような要素は配列内に存在しないため、undefinedを返しています。

テスト関数が一度でも該当の要素を見つければ、配列の反復処理が終了する

findメソッドはテスト関数が一度でも該当の要素を見つければ、配列の反復処理が終了します。サンプルコードを以下に示します。

const arr = [1, 2, 3, 4, 5];
const found = arr.find((element) => {
  console.log('number:', element);
  return element > 2;
});
console.log(found);
// ログ出力
// number: 1
// number: 2
// number: 3
// 3

上記のサンプルコードでは、各要素についてコンソールにログを出力しています。3より大きい最初の数を見つけた後、配列の反復処理が終了していることが分かります。

空のスロットはundefinedと同じように扱われる

findメソッドは空のスロットに対しても処理を実行します。その際、空のスロットはundefinedとして扱われます。サンプルコードを以下に示します。

const arr = [1, , , , 5];

// すべての要素を表示
arr.find((element) => {
  console.log('number:', element);
});
// ログ出力
// number: 1;
// number: undefined;
// number: undefined;
// number: undefined;
// number: 5;

上記のサンプルコードでは、各要素についてコンソールにログを出力しています。空のスロットはundefinedとして扱われていることが分かります。

本記事のまとめ

この記事ではJavaScriptの『findメソッド』について、以下の内容を説明しました。

  • findメソッドとは
  • findメソッドの構文
  • findメソッドの使い方
    • 配列内のオブジェクトをプロパティの値で検索する
  • findメソッドの特徴
    • 配列の先頭の要素からテスト関数を実行し、最初に見つかった要素を返す
    • テスト関数を満たす要素が見つからない場合には、undefinedを返す
    • テスト関数が一度でも該当の要素を見つければ、配列の反復処理が終了する
    • 空のスロットはundefinedと同じように扱われる

お読み頂きありがとうございました。