関数の引数をマスターする: JavaScript では少ない方が良い-jsチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-10-03 18:20:30

オリジナル

364 人が閲覧しました

Mastering Function Arguments: Less is More in 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
}

ログイン後にコピー

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