関数の設計において 引数をどう受けるか は、使いやすさ・拡張性に大きく関わる重要なポイントです。
意味が明確な名前を使う
引数名は、何の値かがわかるようにする。
良い例：
const createUser = (name: string, age: number, email: string) => { ... }
悪い例：
const createHoge = (value: string) => { ... }
オプションはオブジェクトでまとめる
悪い例：
const setData = (data: Data, isPaid?: boolean, index?: number) => { ... }
こういう引数を受け取る関数の場合、以下の様な呼び出しになり、第2引数と第3引数の意味がよくわからなくなってしまいます。また、第2引数がなくて第3引数を指定する場合、第2引数を無意味に指定する必要も出てしまいます。
setData(data, true, index)
なので、オプショナルな引数はオブジェクトにした方がいいのです。
良い例：
const setData = (data: Data, option?: {
isPaid: boolean,
index: number
}) => { ... }
上記のようにしておけば、以下のような呼び出し方になり、どのようなオプションが指定されて関数が実行されているのかがわかりやすくなり、可読性が上がります。
await setMemoForHandwriteSave(data, {
isPaid: true
index
})
デフォルト値を設定する
const greet = (name = "ゲスト") => {
console.log(`こんにちは、${name}さん！`);
}
上記の場合、引数が渡されなかった場合にデフォルト値の "ゲスト" を使いますので、呼び出し元で引数を入れないで呼ぶことも可能です。
greet() // 出力: こんにちは、ゲストさん！
greet("太郎") // 出力: こんにちは、太郎さん！
引数の数は3個までがベスト
関数の引数の数は、少ないほど理解しやすく、使いやすいというのが基本的な考え方です。
- 0〜3個：シンプルで直感的。呼び出し側もわかりやすい
- 4〜5個：複雑で、順番に注意しないといけなくなる
- 6個〜：オブジェクトでまとめるなど再設計した方がいい