# Simplify Long List of Parameters

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.

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

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

## ðŸ“š Additional Resources

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

- MDN Web Docs: Parameters
- Wikipedia: Single Responsibility Principle (when to split up functinos and parameters)