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?

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?

• javascript

• 2 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ý Commented Feb 23, 2017 at 14:40
• 1 It's a bination 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 Commented Feb 23, 2017 at 14:41
• 1 This is close, but not quite a dupe. Also this. 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 Commented Feb 23, 2017 at 14:47
• TL;DR: "...you can define a default value, so that your function doesn't have to take any arguments." – Andrew Commented Jan 8, 2020 at 17:58

2 Answers 2

This is ES2015 syntax. Your function declaration bines 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"

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.