開発者の皆さん！ ?今日は、クリーンで保守しやすい 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
});

このアプローチの利点

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

プロのヒント: 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
}

これにより、タイプ セーフティとオートコンプリートが追加され、コードがさらに堅牢になります!

まとめ

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

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

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