JavaScriptのmap()メソッドについて

はじめに

現在、JavaScript、jQueryを使って簡単な検索予測機能をつくっています。
その際、新しい配列の要素を作るために.map()メソッドを使用したのですが、引っかかった部分がありましたので、記事にしてみました。

疑問点

複数のワードに対して検索予測をかけるために
ここでは、inputタグにて入力された値を配列に入れ、正規表現に変換することまでを目的にしています。

//HTMLの<input>タグで下記のようにid="keyword"が与えられている状態
//<input type='text' id="keyword" class="form-control">

//配列inputsの要素に対して、入力された文字を先頭として始まる文字列を表現する
//ために"^"を付け足すための関数
  function editElement(element) {
      let result = "^" + element;
      return result;
    }

  //①入力された文字列をval()で受け取る。
  let input = $("#keyword").val();
  //②split("")で配列としてinputsに納める。
  let inputs = input.split(" ")
  //③inputsの要素に対して正規表現を加えるために、コールバック関数editElementを
  //呼び出す。
  let newInputs = inputs.map(editElement); //←ここで疑問点
  //④.join("|")でRegexpで使える形に変換し変数regに代入する
  let reg = new RegExp(newInputs.join("|"));

.map()によってeditElementが呼び出された際、実引数として何も指定されていないのに仮引数に(element)が使われ、配列の要素の値が変換されています。本来なら実引数として、配列の各要素を指定しななければいけないのではないかと疑問が湧いたので.map()について調べてみました。

調べた結果

まずリファレンスにある、.map()メソッドの構文を見てみると

array.map(function(currentValue, index, arr), thisValue)

となっています。
.map()の引数として使われるコールバック関数はcurrentValue(required), index(option), arr(option)という三つの引数をとり、currentValueの部分には配列の要素の値が渡されます。その値がコールバック関数で引数として使用されます。

これを踏まえて、元のコードに戻って確認してみると
inputs.map(editElement)で呼び出された
function editElement(element)には引数として、配列inpusの各要素の値が渡されていることがわかります。

要するに、.map()メソッドは「与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成する」ためのメソッドなので、こちらから引数を指定しなくても、自動で配列の各要素をコールバック関数に渡してくれるようです。