プログラム上で変数を効率的に格納する配列は、プログラミング言語を問わず良く用いられるデータ構造です。もちろんJavaScriptでも配列が扱うことができ、さらには配列を拡張した連想配列の利用も可能です。

そんなJavaScriptで配列を扱う際に、積極的に活用したいのがJavaScriptに備えられているArrayオブジェクトの関数です。

本記事では配列の中で特定の値を持つレコードを取得する、find関数について、使い方、サンプル、類似の関数などを紹介します。

find関数とは

find関数はECMAScript 2015にて追加された配列を操作する関数です。配列内の特定の値を持つレコードを探して返してくれます。

疑似的なコードで記載すると以下のようになります。

条件に合致する配列の一要素 = 配列のオブジェクト.find(条件式)

まずは単純な値の配列の場合のサンプルコードを見てみましょう。

const array = [99,88,77,66,55];

const num = array.find(element => element  < 70);

console.log(num);

出力結果は

66

となります。

配列arrayを宣言し、arrayからfind関数を呼び出しています。

find関数の引数にはアロー式で「配列の要素の中で値が70より小さい」という条件式を指定しています。結果として、上記コードでは、先頭レコードから条件に当てはまるか比較を行い、最初に見つかった「66」がコンソールに出力されます。

また、各レコードに複数の値を持つ配列でも、find関数を利用することが可能です。

const students = [
  {id:1, name: 'john', age: 12},
  {id:2, name: 'mary', age: 10},
  {id:3, name: 'taro', age: 11},
];

const student = students.find( ({ id }) => id == 2 );

console.log(student);

出力結果は以下の通りです。

{id: 2, name: 'mary', age: 10}

こちらのサンプルコードではid,name,ageの三つの要素を持つレコードの配列studentsに対し、find関数を使っています。

find関数の引数では、idが2と一致するという条件を指定しており、条件に従って先頭レコードから比較が行われます。結果として2レコード目が選択されて「{id: 2, name: 'mary', age: 10}」がコンソールには出力されます。

仕様についての注意点

find関数を利用する場合、下記2点の仕様に注意してください。

配列の先頭から一致するレコードを探し、最初に見つかったものを返す。

find関数の引数の条件式に合致するレコードが複数存在する場合でも、find関数では最初の1件のみが返されます。条件の指定は気を付けて行う必要があります。

該当するレコードがない場合、undefinedが返される。

条件式に合致するレコードが存在しない場合はundefinedが返されます。返された値を利用する場合には、undefinedが返されるケースにも配慮しておきましょう。

構文と引数

findの引数にはアロー関数、コールバック関数、インラインコールバック関数を記載することができます。いずれの場合にも、結果が真偽値となる関数を記述します。

一般的にはfind関数の引数にはアロー関数が指定されるケースが多いです。これは、ECMAScript2015でfind関数とアロー関数の両者が利用可能となったためと考えられます。

また、アロー関数、コールバック関数、インラインコールバック関数の引数には、処理中の要素elementや添え字Indexを指定することが可能です。

参考：mdn web docs「Array.prototype.find()」

find関数が利用されるケース

find関数は、json形式で複数項目を持つデータを配列で扱う際に、特定レコードを取得する用途で良く利用されます。条件式の部分を変数等で記述することで柔軟に利用することが可能です。

また、find関数の引数内の条件式は値の一致だけではなく不等号も利用可能です。数値での範囲指定などで用途が拡がります。

find関数と類似した関数

本記事で紹介したfind関数以外にも、配列に利用できる便利な関数があります。用途によって使い分けましょう。

参考：mdn web docs「Array」

findIndex関数

findIndex関数も指定した条件のレコードを配列から探す関数です。findIndex関数の場合、戻り値は該当するレコードの配列の添え字（Index）となります。

配列に格納された値そのものではなく、何番目に値が格納されているかを調べる際に用います。

filter関数

filter関数はfind関数と同様に配列内の条件式に合致するレコードを探し、その値を返す関数です。filter関数の場合は、元の配列内から条件式に当てはまるレコードを全てとりだし、戻り値として配列で返します。

配列から条件式に該当するデータ全てを取得したい場合にはfilter関数が有効です。

includes関数

includes関数は引数に指定された値が配列内に存在することを探す関数です。引数には数値や文字列を指定することができ、レコードが1行以上存在する場合にはtrue、それ以外はfalseを返します。

配列にある値が含まれるかどうかのチェックに利用されます。

some関数

some関数も配列内に条件式に合うレコードが存在することを探す関数です。some関数の場合は、条件に合うレコードが1行以上存在する場合にはtrue、それ以外はfalseを返します。

まとめ

JavaScriptで配列を扱う場合、Arrayオブジェクトの関数を利用すると開発を効率化することができます。find関数では条件に一致する配列のレコードを取得することが可能です。

また、findIndex()、filter()、some()などの関数でも配列に条件に一致するレコードが存在するかどうかを探すことができます。戻り値に違いがあるため、利用シーンに合わせて使い分けましょう。