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型のフラグがある場合は特に）