Fluent Interfaces & Method Chaining

Method chaining and fluent interfaces are patterns that can make your code read smoothly and clearly.

const result = data
  .filter(isValid)
  .map(transform)
  .reduce(aggregate);

If this style feels natural, you’re already comfortable with fluent interfaces. If it seems a bit unfamiliar, you’re not alone. Let’s take a closer look at what’s going on here.

So What Is a Fluent Interface?

It’s a design pattern where each method returns the object it was called on, so you can chain method calls together in a single statement.

document
  .querySelector("#button")
  .classList.add("active")
  .scrollIntoView();

Each method does its job and returns the object, making it easy to keep chaining more methods.

A Mildly Useful Use Case

Imagine building a configuration builder for a pizza. Not a real pizza, but a way to describe one in code.

Without fluent interfaces:

const pizza = new Pizza();
pizza.setCrust("thin");
pizza.addTopping("cheese");
pizza.addTopping("olives");
pizza.setSauce("tomato");
pizza.bake();

With fluent interfaces:

const pizza = new Pizza()
  .setCrust("thin")
  .addTopping("cheese")
  .addTopping("olives")
  .setSauce("tomato")
  .bake();

Both approaches work, but the fluent style can be more concise and easier to read.

Points to Ponder (or, When Things Get Awkward)

While fluent interfaces can make code look cleaner, there are a few things to keep in mind:

• Lengthy Chains: Sometimes a chain can get so long that it becomes hard to follow. If you’re scrolling a lot, it might be worth breaking things up.
• Debugging: If something goes wrong in the middle of a long chain, it can be tricky to figure out where the problem is.
• Mutability: Fluent interfaces often modify the object in place, so be careful if you’re sharing objects between different parts of your code.

Bonus: DIY Fluent API

class Chain {
  constructor(val = 0) {
    this.val = val;
  }

  add(n) {
    this.val += n;
    return this;
  }

  multiply(n) {
    this.val *= n;
    return this;
  }

  result() {
    return this.val;
  }
}

const total = new Chain(5).add(3).multiply(2).result(); // 16

With just a few lines, you’ve created a simple calculator that supports method chaining.

Final Thoughts

Fluent interfaces can make your APIs more expressive and your code easier to read. They’re a useful tool, especially when you want to build up configurations or transformations step by step.

As with any pattern, use them where they make sense. If your method chains start getting too long, it might be time to refactor.