Scenario Overview
In a restaurant, customers can order multiple dishes, and we want to calculate their total bill based on the prices of the dishes ordered, any applicable taxes, and discounts. We’ll create a function to compute the total bill and use call
, apply
, and bind
to handle different customers and their orders.
Code Example
// 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
Explanation
-
Function Definition:
- We define a function
calculateTotalBill
that takestaxRate
anddiscount
as parameters. This function calculates the total bill by adding tax to the order total and subtracting any discounts.
- We define a function
-
Customer Objects:
- We create two customer objects,
customer1
(Sarah) andcustomer2
(Mike), each with their respective names and total order amounts.
- We create two customer objects,
-
Using
call
:- For Sarah, we calculate her total bill using the
call
method. This allows us to specifycustomer1
as the context and pass the tax rate and discount as separate arguments. The output shows Sarah's total bill after applying the tax and discount.
- For Sarah, we calculate her total bill using the
-
Using
apply
:- For Mike, we use the
apply
method to calculate his total bill. This method allows us to pass the parameters as an array, making it convenient for handling multiple arguments. The total bill for Mike is calculated similarly but with different tax and discount values.
- For Mike, we use the
-
Using
bind
:- We create a bound function for Sarah using
bind
, which locks the context tocustomer1
. This means we can later call this new function without needing to specifythis
again. We demonstrate this by calculating Sarah's total bill again with different parameters, allowing for flexible future calculations.
- We create a bound function for Sarah using
Output
- The console logs display the total bills for both Sarah and Mike based on their respective orders and discounts.
- This example effectively demonstrates how
call
,apply
, andbind
can be used to manage function contexts within a restaurant billing system.
Conclusion
This scenario highlights how call
, apply
, and bind
can be utilized in a practical setting, such as calculating restaurant bills, helping to understand how these methods facilitate the management of this
in JavaScript.
Top comments (0)