【JS】関数の引数はオブジェクトで渡したい

タイトル通りですが…

普通、JavaScript(TypeScript)で関数に引数を渡す場合、以下のようにします。

const hogeFunc = (hogeName: string, hogeValue: number, hogeFlag: boolean) => {
  // 処理
}

// 関数呼び出し
hogeFUnc('hoge', 55, true)

引数の数が少なければ、これでもいいかもしれません。

ただ、引数の数がもっと増えた場合や、デフォルト引数を使用する場合に問題になります。

例えば以下のような場合です。

const hogeFunc = (
  hogeName: string,
  hogeValue: number,
  hogeFlag1?: boolean = false,
  hogeFlag2?: boolean = false,
  hogeFlag3?: boolean= false,
) => 
  // 処理
};

hogeFunc("test", 12345, false, false, true)

hogeFlag1、hogeFlag2、hogeFlag3はオプショナル引数なので、省略できます。

でも、「hogeFlag3にtrueを渡したい。hogeFlag1とhogeFlag2はデフォルト値でOK」という場合はhogeFlag1とhogeFlag2にfalseを指定する必要があります。

必要な引数は3つだけなのに5つ全部書く必要があり面倒です。

また、引数の順番も気にする必要があり、上記のように同じ型の引数が並んでいると間違いも起こりやすいです。

上記をオブジェクトで渡すようにすると以下のようになります。

const hogeFunc = ({
  hogeName,
  hogeValue,
  hogeFlag1 = false,
  hogeFlag2 = false,
  hogeFlag3 = false,
}: {
  hogeName: string;
  hogeValue: number;
  hogeFlag1?: boolean;
  hogeFlag2?: boolean;
  hogeFlag3?: boolean;
}) => {
  // 処理
};

  hogeFunc({hogeName: "test", hogeValue: 12345, hogeFlag3: true})

必要な引数だけの指定でよく、オブジェクトのキーのおかげで「このtrueは何のフラグだ？」となることも減りそうです（サンプルなのでhogeFlagという名前ですが、実際にはわかりやすい名前で命名されるはず）

また、引数の順番も気にする必要がなくなります。

個人的には引数が3つまではOK、4つ以上はオブジェクト形式かなと思っています（boolean型のフラグがある場合は特に）

IT技術ブログ
↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです！

にほんブログ村