Function arguments (2 or fewer ideally)


function createMenu(title, body, buttonText, cancellable) {
  // ...


function createMenu({ title, body, buttonText, cancellable }) {
  // ...

  title: "Foo",
  body: "Bar",
  buttonText: "Baz",
  cancellable: true

Limiting the amount of function parameters is incredibly important because it makes testing your function easier. Having more than three leads to a combinatorial explosion where you have to test tons of different cases with each separate argument.

One or two arguments is the ideal case, and three should be avoided if possible. Anything more than that should be consolidated. Usually, if you have more than two arguments then your function is trying to do too much. In cases where it’s not, most of the time a higher-level object will suffice as an argument.

Since JavaScript allows you to make objects on the fly, without a lot of class boilerplate, you can use an object if you are finding yourself needing a lot of arguments.

To make it obvious what properties the function expects, you can use the ES2015/ES6 destructuring syntax. This has a few advantages:

  1. When someone looks at the function signature, it’s immediately clear what properties are being used.
  2. Destructuring also clones the specified primitive values of the argument object passed into the function. This can help prevent side effects. Note: objects and arrays that are destructured from the argument object are NOT cloned.
  3. Linters can warn you about unused properties, which would be impossible without destructuring.