実際のアプリケーションを使用した JavaScript カリー化を理解する

JavaScript で「カリー化」に遭遇し、その目的について疑問に思ったことはありますか?この投稿では、カリー化の謎を解き明かし、簡単な例とコードの明瞭さと柔軟性を高める実践的なアプリケーションを使ってその利点を説明します。

?カリー化とは何ですか?

関数型プログラミング手法の 1 つであるカリー化では、関数の引数を一度にすべてではなく順番に処理します。 カリー化された関数は別の関数を生成し、すべての引数が指定されるまで次のパラメーターを待ちます。 基本的に、複数引数の関数を単一引数の関数のシーケンスに変換します。

現実世界の例えとコードで説明してみましょう:

?ハンバーガーを作る

ハンバーガーを注文するところを想像してみてください。 シェフはそれを層ごとに組み立てます:

レイヤー 1: バン (最初の引数) レイヤ 2: パティ (第 2 引数) レイヤー 3: トッピング (第 3 引数)

これを通常の関数とカリー化された関数を使用してコードに変換すると次のようになります。

?通常の関数: すべての成分が同時に渡されます。

<code class="language-javascript">function makeBurger(bun, patty, topping) {
    return `Your burger includes: ${bun} bun, ${patty} patty, and ${topping} topping.`;
}

const myBurger = makeBurger("Sesame", "Beef", "Cheese");
console.log(myBurger); // Output: Your burger includes: Sesame bun, Beef patty, and Cheese topping.</code>

?カレー機能: 材料を1つずつ追加します。

<code class="language-javascript">function makeBurgerCurried(bun) {
    return function (patty) {
        return function (topping) {
            return `Your burger includes: ${bun} bun, ${patty} patty, and ${topping} topping.`;
        };
    };
}

// Usage example
const selectBun = makeBurgerCurried("Sesame");
const selectPatty = selectBun("Beef");
const myCurriedBurger = selectPatty("Cheese");

console.log(myCurriedBurger); // Output: Your burger includes: Sesame bun, Beef patty, and Cheese topping.</code>

✍️ 説明:

最初の呼び出し: makeBurgerCurried("Sesame") は「Sesame」を受け取り、パティを待つ関数を返します。

2 番目の呼び出し: selectBun("Beef") は「牛肉」を受け取り、トッピングを待つ関数を返します。

3 回目の呼び出し: selectPatty("Cheese") は「チーズ」を受け取り、シーケンスを完了し、ハンバーガーの説明を返します。

⭐ アロー関数による合理化されたカリー化

アロー関数は、より簡潔なアプローチを提供します。

<code class="language-javascript">const curriedArrow = (bun) => (patty) => (topping) =>
    `Your burger includes: ${bun} bun, ${patty} patty, and ${topping} topping`;

const myArrowBurger = curriedArrow("Sesame")("Beef")("Cheese");
console.log(myArrowBurger); // Your burger includes: Sesame bun, Beef patty, and Cheese topping</code>

⁉️ カリー化を使用する理由

カリー化は、事前定義された引数を使用した関数の再利用が必要なシナリオに優れています。コードの再利用性、可読性、モジュール性が向上します。

?現実世界のアプリケーション: 動的割引計算ツール

段階的な割引を備えた e コマース プラットフォームを考えてみましょう:

• 一般のお客様: 10% 割引
• プレミアム顧客: 20% 割引

通常の関数実装とカリー化された関数の実装を比較してみましょう:

?通常の関数: 柔軟性が低く、再利用可能です。

<code class="language-javascript">function calculateDiscount(customerType, price) {
    if (customerType === "Regular") return price * 0.9;
    else if (customerType === "Premium") return price * 0.8;
}

console.log(calculateDiscount("Regular", 100)); // Output: 90
console.log(calculateDiscount("Premium", 100)); // Output: 80</code>

?カリー化された関数: 再利用性と適応性が高くなります。

<code class="language-javascript">function createDiscountCalculator(discountRate) {
    return function (price) {
        return price * (1 - discountRate);
    };
}

const regularDiscount = createDiscountCalculator(0.1);
const premiumDiscount = createDiscountCalculator(0.2);

console.log(regularDiscount(100)); // Output: 90
console.log(premiumDiscount(100)); // Output: 80
console.log(regularDiscount(200)); // Output: 180</code>

新しい顧客タイプの追加は簡単です:

<code class="language-javascript">const studentDiscount = createDiscountCalculator(0.15);
console.log(studentDiscount(100)); // Output: 85</code>

結論

最初は複雑に見えますが、カリー化により関数の設計が簡素化され、コードの明瞭さが向上し、再利用性が促進されます。 カリー化をプロジェクトに組み込んで、その利点を直接体験してください。

以下のコメント欄でカレー作りの経験を共有してください!コーディングを楽しんでください! ✨

以上が実際のアプリケーションを使用した JavaScript カリー化を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。