JavaScriptで引数が多い関数において、呼び出し時の可読性を上げる

はじめに

いち関数における引数が多くなってくると、呼び出し時に各引数が何を指しているのか分からなくなることはあると思います。特に数値やbool値が連続していると、作った当人でも混乱してしまいます。

そこで引数の可読性を落とさない処理方法をまとめてみました。何も目新しいものはないと思いますが、何かの参考にでもなれば幸いです。JavaScriptでの動作を想定しています。

目次

• 素直にそのまま書くと・・・
• A. 引数にオブジェクトを渡す
• B. 引数にコメントアウトを含める

素直にそのまま書くと・・・

• 呼び出し時の引数の値が何を指しているのか分かりにくい
• 引数の順番が固定されてしまっている

.js

function showPetDetail(name, type, owner, height_cm, weight_kg, isVaccinated, hasBrother) {
  console.log(name);
  console.log(type);
  console.log(owner);
  /* ... */
}
showPetDetail('ポチ', '犬', '山田太郎', 80, 10, true, false);

A. 引数にオブジェクトを渡す

• 引数にはオブジェクトを1つだけ渡します
• オブジェクトのkeyにより、引数の名前が設定できます
• 名前のおかげで呼び出す側でその値が何を表しているか、ひと目で分かります
• 関数本体では、引数のプロパティでアクセスするよう（もしくは代入など）にします

.js

function showPetDetail(args) {
  // そのまま引数のプロパティでアクセスするか
  console.log(args.name);
  console.log(args.type);
  console.log(args.owner);
  /* ... */

  // 代入するか
  var name  = args.name  || 'いっぬ';
  var type  = args.type  || '犬';
  var owner = args.owner || '匿名希望';
  /* ... */

  // ループを活用（できる処理内容であれば）
  for (var key in args) {
    console.log(args[key]);
  }
}

var myPetInfo = {
  name        : 'ポチ',
  type        : '犬',
  owner       : '山田太郎',
  height_cm   : 80,
  weight_kg   : 10,
  isVaccinated: true,
  hasBrother  : false
};
showPetDetail(myPetInfo);

/* もしくは
showPetDetail({
  name        : 'ポチ',
  type        : '犬',
  owner       : '山田太郎',
  height_cm   : 80,
  weight_kg   : 10,
  isVaccinated: true,
  hasBrother  : false
});
 */

B. 引数にコメントアウトを含める

• 引数にコメントアウトを含めることで、呼び出す側での引数の可読性を上げます
• 呼び出す側の工夫だけなので、関数本体はそのままでOKです
• ただし呼び出す箇所が何度もあると冗長に・・・
• 関数内部が触れない・触りたくない場合の策として

コメントアウトは無視されるので関数には渡されません

.js

showPetDetail(
  /* name =         */ 'ポチ',
  /* type =         */ '犬',
  /* owner =        */ '山田太郎',
  /* height_cm =    */ 80,
  /* weight_kg =    */ 10,
  /* isVaccinated = */ true,
  /* hasBrother =   */ false
);

終わりに

APIだと引数はオブジェクトで渡すことが多いと思うので、Aはごく基本的な手法かと思います。BについてはAのようにできない場合の苦肉の策って感じですね。。

他に良い案があれば、ご教授ください～