시나리오 개요

레스토랑에서 고객은 여러 가지 요리를 주문할 수 있으며, 우리는 주문한 요리 가격, 관련 세금 및 할인을 기준으로 총 청구액을 계산하려고 합니다. 총 청구액을 계산하고 호출, 적용, 바인딩을 사용하여 다양한 고객과 주문을 처리하는 기능을 만들겠습니다.

코드 예

// Function to calculate the total bill
function calculateTotalBill(taxRate, discount) {
    const taxAmount = this.orderTotal * (taxRate / 100); // Calculate tax based on the total order amount
    const totalBill = this.orderTotal   taxAmount - discount; // Calculate the final bill
    return totalBill;
}

// Customer objects
const customer1 = {
    name: "Sarah",
    orderTotal: 120 // Total order amount for Sarah
};

const customer2 = {
    name: "Mike",
    orderTotal: 200 // Total order amount for Mike
};

// 1. Using `call` to calculate the total bill for Sarah
const totalBillSarah = calculateTotalBill.call(customer1, 10, 15); // 10% tax and $15 discount
console.log(`${customer1.name}'s Total Bill: $${totalBillSarah}`); // Output: Sarah's Total Bill: $117

// 2. Using `apply` to calculate the total bill for Mike
const taxRateMike = 8; // 8% tax
const discountMike = 20; // $20 discount
const totalBillMike = calculateTotalBill.apply(customer2, [taxRateMike, discountMike]); // Using apply with an array
console.log(`${customer2.name}'s Total Bill: $${totalBillMike}`); // Output: Mike's Total Bill: $176

// 3. Using `bind` to create a function for Sarah's future calculations
const calculateSarahBill = calculateTotalBill.bind(customer1); // Binding Sarah's context
const totalBillSarahAfterDiscount = calculateSarahBill(5, 10); // New tax rate and discount
console.log(`${customer1.name}'s Total Bill after New Discount: $${totalBillSarahAfterDiscount}`); // Output: Sarah's Total Bill after New Discount: $115

설명

1. 함수 정의:

   • 세율과 할인을 매개변수로 사용하는 계산 토탈 빌(calculateTotalBill) 함수를 정의합니다. 이 함수는 주문 총액에 세금을 더하고 할인을 차감하여 총 청구액을 계산합니다.

2. 고객 개체:

   • 고객1(Sarah)과 고객2(Mike)라는 두 개의 고객 개체를 생성합니다. 각 개체에는 각각의 이름과 총 주문 금액이 포함됩니다.

3. 통화 사용:

   • Sarah의 경우 호출 방법을 사용하여 총 청구액을 계산합니다. 이를 통해 customer1을 컨텍스트로 지정하고 세율과 할인을 별도의 인수로 전달할 수 있습니다. 출력에는 세금 및 할인을 적용한 후 Sarah의 총 청구서가 표시됩니다.

4. 적용 사용:

   • Mike의 경우 적용 방법을 사용하여 총 청구액을 계산합니다. 이 방법을 사용하면 매개변수를 배열로 전달할 수 있으므로 여러 인수를 처리하는 데 편리합니다. Mike의 총 청구서는 비슷하게 계산되지만 세금 및 할인 값이 다릅니다.

5. 바인드 사용:

   • 바인드를 사용하여 Sarah에 대한 바인딩 함수를 생성합니다. 이는 컨텍스트를 customer1에 고정합니다. 이는 나중에 이를 다시 지정할 필요 없이 이 새 함수를 호출할 수 있음을 의미합니다. 우리는 유연한 향후 계산이 가능하도록 다양한 매개변수를 사용하여 Sarah의 총 청구액을 다시 계산함으로써 이를 입증합니다.

산출

• 콘솔 로그에는 각각의 주문과 할인을 기준으로 Sarah와 Mike의 총 청구서가 표시됩니다.
• 이 예는 레스토랑 청구 시스템 내에서 기능 컨텍스트를 관리하기 위해 호출, 적용 및 바인드를 사용하는 방법을 효과적으로 보여줍니다.

결론

이 시나리오에서는 레스토랑 요금 계산과 같은 실제 설정에서 호출, 적용 및 바인드를 활용하는 방법을 강조하여 이러한 방법이 JavaScript에서 이를 어떻게 쉽게 관리하는지 이해하는 데 도움이 됩니다.