How to use options object in functions?

Arek Jaworski

Jan 19, 2019·3 min read

Standard way of creating functions and passing parameters is simply to declare a function name and list parameters in the bracket:

function foo(param) {
    // do something
}

This works well and there is absolutely nothing wrong with such a function.

However, when we pass more parameters to our function and/or we start adding optional parameters, things can become awkward to use:

function bar (param1, param2, param3, optionalParam1 = true) {
    // do something
}

First of all we have to remember the order of parameters. Obviously, all modern days IDEs will help us a bit. Yet, it’s still confusing when we simply look at the code:

zed(true, false, 5);

We can easily change all our functions to use options object. Let’s rewrite function bar:

function bar (options) {
    const { param1, param2, param3, optionalParam1 = true } = options;
    // do something
}

What we used here is destructuring assignment. In theory and practice we could have done this straight inside the bracket:

function bar ({ param1, param2, param3, optionalParam1 = true }) {
    // do something
}

However, when we check how this is shown in, for example, Visual Studio Code then we will see IntelliSense displaying this:

We see the function signature with all parameters, followed by the same parameters and their type.

Therefore, if we use move destructuring to the next line and simply use options in function signature:

Okay, that doesn’t look like an improvement… yet. Let’s just add proper JSDoc:

/**
 * Example function
 *
 * @param {Object} options Options object
 * @param {string} options.param1 First parameter description here
 * @param {string} options.param2 Second parameter description here
 * @param {number} options.param3 Third parameter description here
 * @param {boolean} [options.optionalParam1=true] Optional parameter
 */
function bar(options) {
    const { param1, param2, param3, optionalParam1 = true } = options;
    // do something
}

Now, let’s look at IntelliSense:

This looks much better.

Moreover, if we give our parameters meaningful names, for example:

function connect(options) {
    const { address, port, timeout = 100 } = options;
    // connect...
}

We can call this function by passing parameters as object in any order:

connect({ address: '1.1.1.1', timeout: 200, port: 5000 });

Plus, the parameter name will tell us straight away what’s the value for!

This technique works well with functions that require multiple parameters. There is really little point to refactor existing code and use options when there is only one or two parameters.

Let common sense and style guides (internal, external or simply good practices) lead us. If particular function looks good and is easy to understand what parameters it’s using there, we can leave it.

However, all other functions can be easily refactored to use options object.