函数foo（{defaultValue = {}} = {}）中的语法是什么意思？

Question

I came across this function the other day

 function foo({ defaultValue = {} } = {}) {
...
}

I don't understand what the { defaultValue = {} } = {} part exactly means. I understand that there is an object property destructing for defaultValue , and there is a default argument set to {} if there is no arguments passed to this function. However I am not sure about what the combination is doing. Can someone explain to me?

Answer 1

I understand that there is an object property destructing for defaultValue , and there is a default argument set to {} if there is no arguments passed to this function.

Yes, that's what

function foo({ defaultValue } = {}) {

would be doing. The additional = {} in

function foo({ defaultValue = {} } = {}) {
//                          ^^^^

now provides a default value for the defaultValue variable, when the property does not exist in the object or is undefined .

Answer 2

It's a nice way of guaranteeing that foo will have access to the defaultValue property of the object argument passed in -

Given -

 function foo ({ bar = 1 } = {}) { console.log(bar) } foo() // => 1 foo({}) // => 1 foo({bar: 2}) // => 2 

However watch out for null specifically -

foo(null) // => TypeError: cannot read property "bar" of null

If we skip the last ... = {} portion, then it will not be able to read bar in the undefined instance -

 function foo ({ bar = 1 }) { console.log(bar) } foo() // TypeError: Cannot destructure property "bar" of undefined or null