Method chaining

What is method chaining and how does it work?

Method chaining is a programming technique that allows you to call multiple methods on the same object in a single line of code. This technique can make your code more readable and concise, especially when performing a series of operations on the same object.

Let’s look at an example using different string methods:

const result = "  Hello, World!  "
  .trim()
  .toLowerCase()
  .replace("world", "JavaScript");
 
console.log(result); // "hello, JavaScript!"

In this example, we start with a string and perform three operations in sequence: trim whitespace, convert to lowercase, and replace the string world with JavaScript. Each method returns a new string, which becomes the target of the next method call.

Method chaining can significantly improve code readability when working with complex operations.

For instance, consider this example using the filter, map and reduce methods:

const transactions = [
  { amount: 100, type: "credit" },
  { amount: 20, type: "cash" },
  { amount: 150, type: "credit" },
  { amount: 50, type: "cash" },
  { amount: 75, type: "credit" }
];
 
const totalCreditWithBonus = transactions
  .filter((transaction) => transaction.type === "credit")
  .map((transaction) => transaction.amount * 1.1)
  .reduce((sum, amount) => sum + amount, 0);
 
console.log(totalCreditWithBonus); // 357.5

In this example, we have an array of transactions where each object has an amount and a credit card or cash type.

We first filter through the transactions and create a new array of just credit card transactions. Then, we chain the map method to the filtered result and for each transaction amount, we multiply it by 1.1 which represents a 10% bonus.

Then, we take that result and chain the reduce method to add up each of the amounts which results in 357.5.

While method chaining can make code more concise and readable, it’s important to use it judiciously.

Very long chains can become difficult to debug, as it’s not immediately clear which step in the chain might be causing an issue. It’s often a good practice to break very long chains into multiple steps for better clarity and easier debugging.