indexOf()とincludes()の違い【やらかし備忘録】
本記事は、TECHPLAY女子部 Advent Calendar 2021 5日目の記事です。
今回は、今年の「やらかし」から学んだことをもとに、復習の意味も兼ねて記事にまとめてみます！
※もし、記事への補足・改善点(修正点)などアドバイスがあれば、コメント頂けますと嬉しいです！
概要
その「やらかし」とは...！
配列を検索して、要素として含まれているか否かで処理を分けたい！
↓
自分：「配列の要素の検索って、indexOf()で-1返すかどうかでいけたよな！」
↓
上司：「え、配列に含まれているかどうかが知りたいんやし、includes()で良くね..？」
何も考えていない自分...。indexOf()が使える！と思って舞い上がってしまいました。
この記事を書いていて、ものすごく恥ずかしいです...(笑)
配列の要素を検索するときに使えるメソッドはいくつかありますね！
今回は実際に「やらかし」た、indexOf()とincludes()の使い方について書いていきます！
indexOf()とは？
どういうもの？
indexOf()とはどういうメソッドなのでしょうか？
配列名.indexOf(検索する値);
公式ドキュメントを確認してみます。
indexOf()メソッドは引数に与えられた内容と同じ内容を持つ最初の配列要素の添字を返します。存在しない場合は -1 を返します。
つまり、第1引数に指定した値を配列の中で検索して、その値がどの位置(インデックス番号)にあるのか、インデックス番号を返してくれます。
もし、指定した値が、その配列の中に存在しなかった場合には、-1を返してくれます。
また、第2引数に、インデックス番号を入れると、そのインデックス番号以降の範囲で検索をします。
配列名.indexOf(検索する値, 開始インデックス番号);
使ってみよう！
早速、indexOf()を使って、確認してみましょう！
例えば、次のような配列(drinkMenu)が存在するとしましょう。
let drinkMenu = ["コーヒー", "紅茶", "緑茶", "ほうじ茶", "フラペチーノ", "カフェオレ"];
色々な飲み物を要素として持つ配列ですね。
①好きな飲み物を検索してみる
配列drinkMenuの中で、好きな飲み物を検索してみます。
まず、「ほうじ茶」で検索してみます。
console.log(drinkMenu.indexOf("ほうじ茶")); // 3
3と返ってきました！
「ほうじ茶」は、配列drinkMenuの中で、インデックス番号3の位置にあることがわかりました！
次は、「ウーロン茶」を検索してみます。
console.log(drinkMenu.indexOf("ウーロン茶")); // -1
-1と返ってきました。
indexOf()は、配列の要素として存在する場合は、その位置(インデックス番号)を返してくれますが、配列の要素として存在しない場合は、-1を返すメソッドです。
従って、配列drinkMenuに要素として存在しない「ウーロン茶」を検索したために、-1が返ってきたことがわかります。
②検索の開始位置を指定して検索してみる
今回は、「フラペチーノ」を検索してみようと思います。先程、「ほうじ茶」は飲んだので(笑)
console.log(drinkMenu.indexOf("フラペチーノ", 3)); // 4
今までとは少し異なる指定をしていることはお気づきでしょうか？①では、第1引数までしか指定していませんでした。検索したい値だけを指定していました。
しかし、今回は、第2引数で何やら数字を指定しています。
これは、検索の開始位置を指定しています。配列の中で検索を開始するインデックス番号を指定することで、その位置〜最後の要素までの範囲の中で、第1引数で指定した値を検索し、範囲内に存在すればその位置(インデックス番号)を返します。
第2引数に3を指定した上で「フラペチーノ」を検索してみました。今回の場合だと、インデックス番号3の要素「ほうじ茶」、その後に続く「フラペチーノ」・「カフェオレ」の範囲で、「フラペチーノ」を検索しています。
結果、インデックス番号4が返ってきたのです。
includes()とは？
どういうもの？
includes()とはどういうメソッドなのでしょうか？
配列名.includes(検索する値);
公式ドキュメントを確認してみます。
includes()メソッドは、特定の要素が配列に含まれているかどうかを true または false で返します。
つまり、第1引数に指定した値を配列の中で検索して、その値が要素として存在するかしないかがtrue/falseでわかります。
また、第2引数に、インデックス番号を入れると、そのインデックス番号以降の範囲で検索をします。
配列名.includes(検索する値, 開始インデックス番号);
使ってみよう！
早速、includes()を使って、確認してみましょう！
例えば、次のような配列(puddingMenu)が存在するとしましょう。
let puddingMenu = ["こだわりプリン", "まぼろしプリン", "ミルクプリン", "ごまプリン"];
最近話題のプリン！
①好きなプリンを検索してみる
まず、「まぼろしプリン」を検索してみます。
console.log(puddingMenu.includes("まぼろしプリン")); // true
trueと返ってきました！配列puddingMenuの中に、「まぼろしプリン」が存在していることがわかりました。
次に、「抹茶プリン」を検索してみます。
console.log(puddingMenu.includes("抹茶プリン")); // false
OMG！falseが返ってきてしまいました...。配列puddingMenuの中に、「抹茶プリン」は存在していないようです。
本記事をご覧下さっている「抹茶プリン」好きな方、ごめんなさい...🙇♀️
②検索の開始位置を指定して検索してみる
今回は、「ごまプリン」を検索してみます。
console.log(puddingMenu.includes("ごまプリン", 3)); // true
しかし、今回は、先程のindexOf()のように、第2引数で何やら数字を指定しています。
これは、検索の開始位置を指定しています。配列の中で検索を開始するインデックス番号を指定することで、その位置〜最後の要素までの範囲の中で、第1引数で指定した値を検索し、範囲内に存在するのかしないのかをtrue/falseで返します。
第2引数に3を指定した上で、「ごまプリン」を検索してみました。今回の場合だと、インデックス番号3の要素「ミルクプリン」、その後に続く「ごまプリン」の範囲で、「ごまプリン」を検索しています。
その結果、trueが返ってきたので、配列puddingMenuの中に、「ごまプリン」は存在していることがわかりました。
どう違うの？
ここまで、indexOf()とincludes()について解説してみました。
両方とも、第1引数に検索したい要素を入れて、検索をすることができていました。
それでは、何が違うのか？
| メソッド名 | 返ってくる値の形式 |
|---|---|
| indexOf() | インデックス番号/-1 |
| includes() | true/false |
上記のように、インデックス番号で返ってくるか、true/falseのbooleanで返ってくるかの違いがあることがわかります。 |
今回の私の「やらかし」とは...
ここからは、本記事執筆のきっかけとなった、今回の私の「やらかし」について反省も込めてお話ししていきます。
検索を行う理由や結果の扱い方は様々です。
配列の要素を検索して、その配列に「含まれる(true)」か「含まれない(false)」かだけを知りたい場合もあると思います。
また、配列の要素を検索して、その配列の中での位置(インデックス番号)を取得して、そのインデックス番号を利用した処理を行いたい場合もあると思います。
例えば、「配列の要素として含まれていたら(true)Aの処理を行い、含まれていなければ(false)Bの処理を行う」というようなとき、欲しい結果は、「含まれる」のか「含まれない」のかですよね？
この場合、確かにindexOf()で-1が返ってこなければ、「配列に要素として含まれている」と捉えることはできます。
しかし、必要なのは、「含まれる」のか「含まれない」のかです。indexOf()を使って、返ってきた値が-1か-1じゃないかを、わざわざ回りくどく判定するよりも、includes()を使ってtrue/falseで判断する方が、わかりやすいですよね！
今回の「やらかし」を通して、実装したい処理によって、最適な対応は異なることを学びました！
おわりに
結果的に同じことを実現できるメソッドでも、最適な対応は何か、誰が見てもわかりやすいか、の観点が抜け落ちていた「やらかし」をしてしまいました。
この「やらかし」を通して、ただ「目的が達成できるから」「実現できるから」という考えだけでコードを記述するのではなく、実装する処理・状況に応じた最適な選択をすることが必要だと学ぶことができました✨
とても良い経験ができました！
長文でしたが、ここまでお読み下さり、ありがとうございました。
Discussion