Suppose we have a function that helps draw a rectangle with some characteristics provided as function arguments.

function draw(x: number, y: number, height: number, width: number, color: string, opacity: number, border: number) {
    // ...drawing logic
}

There are seven parameters for this function already and all of them are necessary to draw the rectangle. What happens when we want to add a new characteristic (e.g. border radius) when drawing a rectangle?

A possible solution is to continually increase the number of function parameters. A better solution is to simplify and group parameters appropriately.

interface Rectangle {
    x: number;
    y: number;
    height: number;
    width: number;
}

interface Attributes {
    color: string;
    opacity: number;
    border: number;
}

function draw(rectangle: Rectangle, attributes: Attributes) {
    // ...dawing logic
}

By grouping the parameters into easily understandable interfaces, we improve readability of the function as well as simplify future refactors to accomodate new attributes.

This is ultimately a tradeoff as primitive parameters provide powerful versatility in how functions can be defined, thus not all parameters need to be simplified this way.

TLDR

General rules to follow to simplify a long list of parameters:

  1. Avoid using more than five parameters for a single function.
  2. Group similar parameters together appropriate to the context.
  3. A large number of parameters usually indicate splitting up the function.

📚 Additional Resources

Here are some additional resources to understand more about function parameters: