> 웹 프론트엔드 > JS 튜토리얼 > 실제 애플리케이션으로 JavaScript Currying 이해하기

실제 애플리케이션으로 JavaScript Currying 이해하기

Patricia Arquette
풀어 주다: 2025-01-20 14:33:11
원래의
157명이 탐색했습니다.

Understanding JavaScript Currying with a Real-World Application

JavaScript에서 '커링'을 접하고 그 목적이 궁금하신가요? 이 게시물에서는 코드 명확성과 유연성을 향상시키는 간단한 예와 실제 응용 프로그램을 통해 카레의 이점을 설명하고 카레의 신비를 풀었습니다.

? 커링이란 무엇인가요?

함수형 프로그래밍 기술인 커링(Currying)에는 함수 인수를 한꺼번에 처리하는 대신 순차적으로 처리하는 방식이 포함됩니다. 카레 함수는 모든 인수가 제공될 때까지 다음 매개변수를 기다리는 또 다른 함수를 생성합니다. 기본적으로 다중 인수 함수를 일련의 단일 인수 함수로 변환합니다.

실제 비유와 코드로 설명해 보겠습니다.

? 버거 만들기

버거를 주문한다고 상상해 보세요. 셰프가 겹겹이 조립합니다:

레이어 1: Bun(첫 번째 인수) 레이어 2: 패티(두 번째 인수) 레이어 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>
로그인 후 복사

? 카레 기능: 재료를 하나씩 추가합니다.

<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"을 수신하고 패티를 기다리는 함수를 반환합니다.

두 번째 호출: selectBun("Beef")은 "쇠고기"를 수신하고 토핑을 기다리는 함수를 반환합니다.

세 번째 호출: 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>
로그인 후 복사

⁉️ 커링을 사용하는 이유는 무엇인가요?

Currying은 미리 정의된 인수를 사용하여 함수를 재사용해야 하는 시나리오에서 탁월합니다. 코드 재사용성, 가독성 및 모듈성을 향상시킵니다.

? 실제 적용: 동적 할인 계산기

단계별 할인이 제공되는 전자상거래 플랫폼을 고려해 보세요.

  • 단골고객: 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 Currying 이해하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿