The Best Way to Set Up Function Parameters in JavaScript


Calling and managing functions becomes a hassle when you have a lot of function parameters, especially when over half of them are optional.

Too Many Parameters!

Suppose we have the function run() with lots of parameters (let’s start with four), each with their own defaults.

function run(str1 = "val1", str2 = "val2", num2 = 10, arr = []) {
  // ...
}

If we only want to set some of the parameters, we would have to use undefined.

run(undefined, "someValue", undefined, [1, 2]);

That’s really messy and can get out of hand really quickly.

When we call run(), we will also need to remember all the parameters as well as the order of the parameters.

Destructuring Assignments

Let’s take a look at how destructuring assignments can help us.

If we wrap all the parameters with braces, then we are just passing in an object as the parameter.

The values are immediately destructurized into the respective variables, eliminating the need for undefined and any parameter order.

let params = {
  str2: "someValue",
  arr: [1, 2]
}
function run({str1 = "val1", str2 = "val2", num2 = 10, arr = []}) {
  console.log(`${str2}, ${arr}`); // Taken from params
  console.log(`${str1}, ${num2}`); // Taken from defaults
}
run(params);

This is all fine and dandy, but if someone were to run run(), without any arguments, they would get an error.

We would have to run run({}) to specify that we want all the default parameters.

run(); // Error!
run({}); // Defaults :)

In order to fix this, we can set a default for the entire object of parameters.

function run({str1 = "val1", str2 = "val2", num2 = 10, arr = []} = {}) {
  console.log(`${str2}, ${arr}`); // Taken from params
  console.log(`${str1}, ${num2}`); // Taken from defaults
}
run(); // Defaults :)

A Step Further

We can rename our inputs using simple destructuring principles.

let params = {
  arr: [1, 2]
}
function run({arr: a = []}) {
  console.log(`${a}`); // arr only accessible through a
}
run(params);

We can also destructurize variables inside parameter arrays. This is especially useful if you know the length of the input array.

let params = {
  arr: [1, 2]
}
function run({arr: [e1, e2]}) {
  console.log(`${e1}, ${e2}`);
}
run(params);