関数の引数をマスターする: JavaScript では少ない方が良い

開発者の皆さん！ ?今日は、クリーンで保守しやすい JavaScript を作成するための重要な側面、つまり関数の引数の管理について詳しく見ていきましょう

引数が多すぎる問題

次のような関数に遭遇したことがありますか?

function createMenu(title, body, buttonText, cancellable, theme, fontSize, callback) {
  // ...a whole lot of logic here
}

もし経験があるなら、引数の順序を覚えようとする苦労や、さらに悪いことに、誰かが必然的に引数を混同したときにデバッグする苦労を知っているでしょう。 ?

2 つの引数のルール

これが黄金律です: 関数の引数は 2 つ以下に制限するようにしてください。
なぜ？説得力のある理由をいくつか挙げます:

• テスト容易性の向上: 引数が少ないということは、すべての可能性をカバーするためのテスト ケースが少ないことを意味します。
• 可読性の向上: 関数の目的を一目で理解することが容易になりました。
• 認知負荷の軽減: 関数を使用する開発者にとって、パラメータの精神的な操作が軽減されます。

しかし、さらにパラメータが必要な場合はどうすればよいでしょうか?

素晴らしい質問です!ここで、オブジェクトの分割の魔法が役立ちます。これを確認してください:

function createMenu({ title, body, buttonText, cancellable, theme = 'light', fontSize = 16, callback = () => {} }) {
  // Your implementation here
}

// Usage
createMenu({
  title: "Settings",
  body: "Adjust your preferences",
  buttonText: "Save",
  cancellable: true
});

このアプローチの利点

• 名前付きパラメータをシミュレートします: 引数は任意の順序で指定できます。 自己文書化: 関数シグネチャは、どのようなプロパティが期待されるかを明確に示します。 デフォルト値: オプションのパラメータのデフォルトを簡単に設定します。 副作用の防止: クローンのプリミティブ値を分割することで、偶発的な突然変異を回避できます。 リンターフレンドリー: ツールは、未使用のプロパティについて警告することができます。

プロのヒント: TypeScript Boost

TypeScript を使用している場合は、さらに一歩進めることができます:

interface MenuOptions {
  title: string;
  body: string;
  buttonText: string;
  cancellable: boolean;
  theme?: 'light' | 'dark';
  fontSize?: number;
  callback?: () => void;
}

function createMenu(options: MenuOptions) {
  // Implementation
}

これにより、型安全性とオートコンプリートが追加され、コードがさらに堅牢になります!

まとめ

このパターンを採用すると、関数がより柔軟になり、使いやすく、保守が簡単になることがわかります。これは小さな変更ですが、コードの品質に大きな影響を与える可能性があります。

このアプローチについてどう思いますか?関数の引数を管理するためのその他のヒントはありますか?コメントで話し合いましょう!

コーディングを楽しんでください! ?

以上が関数の引数をマスターする: JavaScript では少ない方が良いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。