JS function declaration: curly brace object assigned with an empty object in parameter declaration

Question

Here is the code,

export function createConnect({
    connectHOC = connectAdvanced,
    mapStateToPropsFactories = defaultMapStateToPropsFactories,
    mapDispatchToPropsFactories = defaultMapDispatchToPropsFactories,
    mergePropsFactories = defaultMergePropsFactories,
    selectorFactory = defaultSelectorFactory
} = {}) {...}

What does { connectHOC = connectAdvanced... } = {} mean inside the function parameter declaration?

I know that

= {}

could mean the default value of the function parameter, but what's the usage for the code inside previous braces?

I'm not entirely sure yet, but the first part (`{ connectHOC = ……… = defaultSelectorFactory }`) is not an object, it is a block with several variable declarations. An object would use colons, not equal signs. — Aurel Bílý, Feb 23 '17 at 14:40
It's a combination of default values for the parameters, and destructuring. Surprised we don't appear to have a question covering both of those at the same time on SO yet, either that or my google is failing me this time. — James Thorpe, Feb 23 '17 at 14:41
[This is close](http://stackoverflow.com/questions/26578167/es6-object-destructuring-default-parameters), but not quite a dupe. [Also this](http://stackoverflow.com/questions/34275971/how-to-destructure-option-argument-with-all-default-values-in-es6). They both explain what's going on here, but from the point of view of the OP knowing they want to assign default values to the destructured parameters, rather than a "what is this syntax" approach. — James Thorpe, Feb 23 '17 at 14:47
**TL;DR:** "...you can define a default value, so that your function doesn't have to take any arguments." — Andrew, Jan 08 '20 at 17:58

Aurel Bílý · Accepted Answer · 2017-02-24T09:04:04.687

This is ES2015 syntax. Your function declaration combines a Destructuring assignment with a default value.

This is a basic destructuring assignment using an object:

var {a, b} = {a: "foo", b: "bar"};
console.log(a); // "foo"
console.log(b); // "bar"

You can add default values to the left hand side:

var {a = "foo", b = "bar"} = {};
console.log(a); // "foo"
console.log(b); // "bar"

When you name arguments when declaring a function, you don't use var, and with object destructuring it will be the same:

function test({a = "foo", b = "bar"}){
    console.log(a + b);
}
test({}); // "foobar"
test({b: "boo"}); // "fooboo"

And, of course, you can define a default value, so that your function doesn't have to take any arguments.

function test({a = "foo", b = "bar"} = {}){
    console.log(a + b);
}
test(); // "foobar"

"...you can define a default value, so that your function doesn't have to take any arguments." Okay finally the actual answer... — Andrew, Jan 08 '20 at 17:58

msanford · Answer 2 · 2017-02-23T15:10:37.700

It's simply the way of doing default parameters using destructuring. You need the last bit as you suggested as a default.

Consider the following, which like the example uses a destructuring assignment:

function withDefault({parameter=something} = {}) {
 console.log(parameter)
}

let something = 1;
withDefault();

versus this one, which is missing the default, and which throws an error:

function withoutDefault({parameter=something}) {
 console.log(parameter)
}

let something = 1;
withoutDefault();
// It needs to be called as withoutDefault({}), withoutDefault(1) or
// with some value, since the function signature doesn't define a default
// in this case.

JS function declaration: curly brace object assigned with an empty object in parameter declaration

2 Answers2