【JavaScript】関数に仮引数を指定して処理を共通化しよう

異なる値に対して処理が重複している場合は関数に仮引数を指定して処理を共通化（一本化）する事ができる。

例題

例えば以下の様な感じで別々の入力フォームから取得した値を格納する変数があったとします。
※value値を取得するタイミングはクリックイベントとします

const inputVal1 = document.getElementById('hoge1').value; //値 (1)
const inputVal2 = document.getElementById('hoge2').value; //値 (2)

入力した値を金額として出力したいが、その前に取得した値が三桁以上ならコンマ区切りにしておきたい。
単純に書くとこんな感じです。

const price1 = Number(inputVal1).toLocaleString();
const price2 = Number(inputVal2).toLocaleString();

<input type="text">で取得することを想定しているのでNumber()で数値型に変換しています。

このままでも問題ないですがNumber().toLocaleString()が重複しています。
「2つしかないなら別に大丈夫でしょ。」 と思いますが、実務となると複数（2つ以上）の値に対して処理を行う事を想定する必要があります。
また複数の値に対して同じ処理を行うとなった際、コピペだろうとタイプミスしてしまうなど懸念があります。

仮引数を指定した関数を作成する

そこで桁数に応じてコンマ区切りの処理を実行してくれる関数を作りました。

function hoge(valType){// valTypeが仮引数
    const hogeVal = Number(valType).toLocaleString();
    return hogeVal
}

関数を使用するので、出力用の変数を以下のように書き換えます。

const price1 = hoge(inputVal1);
const price2 = hoge(inputVal2);

仮引数を指定することで処理を行いたい値を柔軟に指定することが出来ます。
仮引数の部分を変数名=実引数にすることで異なる値に同じ処理を行う（共通化する）ことが可能になります。

return 変数名が無いと結果がundefinedになるので注意が必要です。

処理を共通化してコードをシンプルにする

処理を纏められるとコード量が抑えられますし、手直しの箇所が明確になるというメリットがあります。
ただ短く書けたとして、それが可読性の高いコードになるかと言われたら別ですが、、、明らかに纏められる（纏められるのでは？と思える）処理は積極的に共通化するアプローチをとってもいいと思います。

今回の例題はあくまでも業務上で遭遇したものからかなり上澄みを紹介したものになりますが、今後の実装のヒントになりましたら幸いです。