JavaScript find と findIndex の使い方

株式会社リュディアです。JavaScript でサポートしている高階関数の1つである findメソッド（以下、find ） についてまとめてみます。性質のよく似た findIndex メソッドについても一緒にまとめます。掲載するソースコードはすべて GAS の開発環境で動作確認をしています。

find, findIndex という名前からわかるように配列の中から何かを見つけるメソッドです。さっそく以下の例をみてみましょう。いつものようにコールバック関数の引数は使う、使わないにかかわらずすべてを記載しています。

function myFind() {
 const inputArray = [ 'りんご', 'みかん', 'バナナ', 'スイカ', '桃' ] ;
 
 const returnValue = inputArray.find( function ( currentValue, index, array ) {
                                        console.log( currentValue, index, array ) ;
                                        if ( currentValue === 'スイカ' )
                                          return true ;
                                        return false ;
                                      } ) ;
 console.log( returnValue ) ;
}

// 実行結果
// currentValue inidex array
// りんご        0      [ 'りんご', 'みかん', 'バナナ', 'スイカ', '桃' ]
// みかん        1      [ 'りんご', 'みかん', 'バナナ', 'スイカ', '桃' ]
// バナナ        2      [ 'りんご', 'みかん', 'バナナ', 'スイカ', '桃' ]
// スイカ        3      [ 'りんご', 'みかん', 'バナナ', 'スイカ', '桃' ]
// スイカ

コールバック関数 function で curretValue が スイカ であれば true を戻り値としています。true を返すと動作は停止し、一致した currentValue である スイカ を戻り値としていることがわかります。同じように findIndex についても見てみましょう。

function myFindIndex() {
 const inputArray = [ 'りんご', 'みかん', 'バナナ', 'スイカ', '桃' ] ;
 
 const returnValue = inputArray.findIndex( function ( currentValue, index, array ) {
                                             console.log( currentValue, index, array ) ;
                                             if ( currentValue === 'スイカ' )
                                               return true ;
                                             return false ;
                                           } ) ;
 console.log( returnValue ) ;
}

// 実行結果
// currentValue inidex array
// りんご        0      [ 'りんご', 'みかん', 'バナナ', 'スイカ', '桃' ]
// みかん        1      [ 'りんご', 'みかん', 'バナナ', 'スイカ', '桃' ]
// バナナ        2      [ 'りんご', 'みかん', 'バナナ', 'スイカ', '桃' ]
// スイカ        3      [ 'りんご', 'みかん', 'バナナ', 'スイカ', '桃' ]
// 3

コールバック関数 function でもし curretValue が スイカ であれば true を戻り値としています。find の例と同じなのですが戻り値をみてください。find では配列の要素であるスイカになっていますが、findIndex ではスイカのインデクス 3 が戻り値になっています。名前の通り find は配列の要素を、findIndex は配列のインデクスを返します。

ただ、これらの例をみて「find とか findIndex とか記述が面倒なだけで何が嬉しいのか？」と思われた方も多いと思います。実際のコーディングではアロー関数を用いて以下のように記述することが多いです。これであれば使ってみようと思いませんか？

function myFindArrow() {
 const inputArray = [ 'りんご', 'みかん', 'バナナ', 'スイカ', '桃' ] ;
 
 const returnValue = inputArray.find( currentValue => currentValue === 'スイカ' ) ;

 console.log( returnValue ) ;
}


// 実行結果
// スイカ

function myFindIndexArrow_2() {
 const inputArray = [ 1, 3, 10, 17, 20, 31 ] ;
 
 const returnValue = inputArray.findIndex( currentValue => currentValue > 18 ) ;
 console.log( returnValue ) ;
}

// 実行結果
// 4

最後に find の動きを確認するために他の例をあげておきます。以下の例をみてください。これまでの例では検索対象であるスイカは配列に1つだけでした。検索対象にマッチするものが複数個ある場合はどうなるでしょうか？

function myFindIndexArrow_3() {
 const inputArray = [ 3, 10, 17, 20, 1, 31 ] ;
 
 const returnValue = inputArray.findIndex( currentValue => currentValue > 18 );
 console.log( returnValue ) ;
}

// 実行結果
// 3

この例では配列の中に > 18 となる要素があるかどうかを確認しています。先頭から 3, 10, 17 の間は > 18 の条件を満たさず、要素が 20 になったときに > 18 を満たすのでインデクス 3 を返します。その次の 1 は再度 18 以下になり最後の 31 は > 18 になりますが find と findIndex はそのときには既に動作を停止しています。複数の要素が合致しても先頭からみて 1 つでも条件を満たすものに出会えばその場で動作を終了します。より厳密にはコールバック関数の戻り値が true または false であり、配列の要素のうち 1 つでも条件を満足し true を返したときに動作を終了します。ここは注意が必要です。

sort と同じく今まで find, findIndex を高階関数と意識せずに使っておられた方も多いのではないでしょうか？ find, findIndex も高階関数の1つです。高階関数であることを意識すると単純な使い方から一段上のレベルで使えるようになると思います。いろいろと試してみてください。

では、ごきげんよう。