配列の名前が複数形で、functionの引数が単数形なのに動くのは何故でしょうか？

Question

JavaScriptのfunctionの引数はbillで、配列がbillsなのに、
何故functionが機能するのか教えていただきたいです！

全く同じ名前ではないのに、このbillはここのbillsの配列の要素だって認識してるんでしょうか。

Tipの料金を計算するfunctionと配列

function tipCalculator(bill) {
  var percentage;
  if (bill < 50) {
    percentage = 0.2;
  } else if (bill >= 50 && bill < 200) {
    percentage = 0.15;
  } else {
    percentage = 0.1;
  }
  return percentage * bill;
}

var bills = [124, 48, 268];
var tips = [tipCalculator(bills[0]),
            tipCalculator(bills[1]),
            tipCalculator(bills[2])];
          
var finalValues = [bills[0] + tips[0],
                   bills[1] + tips[1],
                   bills[2] + tips[2]];
console.log(tips, finalValues);

Answer 1

全く同じ名前ではないのに、このbillはここのbillsの配列の要素だって認識してるんでしょうか。

関数の仮引数名は、外部のコードとは関係なく自由につけられます。名前で紐付けるのではなく、関数の呼び出し時のカッコ内に書いたものが引数として渡される、それだけの話です。

Comments

[maisumakun]

というより、billsの1要素だけ渡す以上、引数名が「bill」というのもむしろ（人間にとって）わかりやすい、と考えます。

[Kana-T]

カッコ内を認識しているだけですね！この場合、tipCalculator(ここ)ですね。
非常にスッキリました。ありがとうございました！

Answer 2

引数も単なる変数で変数名は任意なので名称に関連性は全くありません。

よく考えてみてください。
渡す引数は別に変数でなくても、「テスト」「123」のような固定値であることもあります。関数(渡されるのは実行結果)であることもあります。

関数側はあくまで渡された情報のみを受けとるだけで、名称という概念までは受けとりません。