Javascript clean code: Handling too many arguments in a Function

Javascript clean code: Handling too many arguments in a Function

1. Problem

Your function receives many arguments and it’s hard to remember the order or not clean to scale up.

You may also have problems with optional arguments.

You may have started with a small function but over time maybe you’ve added additional flags for some features.

2. Solution

Combine arguments in an object

You may think it looks the same - however...!

  • You don’t have to remember the order of the arguments.

  • It’s easy to scale.

  • In case one of your arguments is optional, you won’t end up in calling printCustomerDetails('John', 'Doe', someValue, undefined, undefined, false, true) (undefined values just because you want to reach the nth argument).

  • If your IDE is not helping with argument names – you won’t have to remember what the 3rd argument was for. Was it isEmployed flag?

This is also helpful for components (regardless of the framework - although the example is in React), as it’s easier to change an interface (especially if you have some prop drilling) than to modify your property definitions.

code

Rather than passing property after property pass an object containing all your props.

code

3. Guidelines when to use:

  • In case you have a common data model.

  • For options/configuration objects - allow optional options.

  • In a function - if you have more than 3 arguments.

  • In a component - when your component takes many properties from a single data model.