ES6 Default Parameters in nested objects

Question

I want to have a function with default parameters inside nested objects, and I want to be able to call it either f() or specifying only individual parameters.

// A function with nested objects with default parameters:

function f({ a = 1, callback = ({ name, param } = { name: "qwe", param: 123 }) } = {}) {
    console.log("a:", a);
    console.log("callback:", callback);
}

// And I want to run it like this:

f();
f({ callback: { params: "456" } });

// But 'callback.name' becomes undefined.

Shouldn't `f (callback: {params: '789'})` be `f ({callback: {params: '789'}})`? — evolutionxbox, May 10 '17 at 14:18
Have you looked at http://stackoverflow.com/questions/26578167/es6-object-destructuring-default-parameters? — evolutionxbox, May 10 '17 at 14:21

score 9 · Accepted Answer · edited May 14 '17 at 12:46

9

When destructuring is mixed with default parameters, I admit the code is hard to read and write (especially when there are nested objects...).

But I think you are trying to do that:

function f({callback: {name = "cbFunction", params = "123"} = {}} = {}) {
  console.log(name);
  console.log(params);
}

f();
f({callback: {params: '789'}});

edited May 14 '17 at 12:46

TotalAMD

887
1
10
20

answered May 10 '17 at 15:37

Badacadabra

8,043
7
28
49

1

You can't call your function as `f()` and `callback` is not an object. – TotalAMD May 11 '17 at 09:16
@totalamd: that's easy to fix though: just add a default value (empty object) for the whole parameter. – Felix Kling May 11 '17 at 14:20
2

If I try to use `callback`, it's `Uncaught ReferenceError: callback is not defined`. It's crucial because I want to use several nested objects with same fields name. – TotalAMD May 14 '17 at 07:23
@TotalAMD See my answer below for a solution to that :) – Joakim L. Christiansen Feb 02 '20 at 19:15

Joakim L. Christiansen · Answer 2 · 2020-02-03T12:17:47.040

3

I found none of the answers here to be what he wanted. But it IS actually possible in a somewhat sexy way by doing this:

(EDIT: Simplified syntax and also show how to add default values for subobjects)

function f({
    a = 1,
    callback = {}
  } = {}) {
  callback = { // default values
    name: "cbFunction",
    params: "123",
    ...callback // overwrites it with given values
  }
  // do the same for any subobjects
  callback.subObject = {
    arg1: 'hi',
    arg2: 'hello',
    ...callback.subObject
  }
  console.log("a:", a)
  console.log("callback:", callback)
}

f()
f({a: 2, callback: {params: '789', subObject: {arg2: 'goodbye'}}})

edited Feb 03 '20 at 12:17

answered Feb 02 '20 at 19:13

Joakim L. Christiansen

1,379
11
15

Your way works Joakim, and you are right that none of the other answers fully meets the requirements in the question. However, the approach from @Badacadabra will actually work as desired, but is missing the top-level object property required in the original question. Can't post multi-line code here so will make another answer. – Tim Stewart Feb 03 '20 at 04:43
@TimStewart TotalAMD also said in a comment that "I want to use several nested objects with same fields name". So if he tries that approach with callback1 and callback2 as arguments then he would have to use different field names in them. – Joakim L. Christiansen Feb 03 '20 at 12:23

TotalAMD · Answer 3 · 2019-05-30T15:47:46.317

1

Turned out to call it like this solves the problem, but is it the best way?

function f({
  a = 1,
  callback = ({
    name,
    param
  } = {
    name: "qwe",
    param: 123
  })
} = {}) {
  console.log("a:", a);
  console.log("callback:", callback);
}

f();
f({ callback: { name, params: "456" } });

edited May 30 '19 at 15:47

answered May 10 '17 at 14:13

TotalAMD

887
1
10
20

1

`f (callback: {name, params: '789'})` is a syntax error. – Felix Kling May 10 '17 at 15:26
Yes, I fixed it. – TotalAMD May 11 '17 at 09:03
1

Badacadabra's answer is better (because it's simpler). – Felix Kling May 11 '17 at 14:19
Your code seems to work in your snippet, but when I add it, I get an error: `ReferenceError: "assignment to undeclared variable param"` And my linter complains: https://ibb.co/ZMw3rtf Why is that and how could I fix it? – Merc Jul 15 '19 at 18:45

Tim Stewart · Answer 4 · 2020-02-03T23:18:41.287

Answer by @Badacadabra is nearly correct but missing the other top level parameter specified in the question.

function f({a = 1, callback: {name = "qwe", params = "123"} = {}} = {}) {
  console.log(a);
  console.log(name);
  console.log(params);
}

However note that within the function body the properties of callback are addressed without the containing object. You could reconstitute them into such an object if you wanted with the line:

const callback = { name, params }

Either way, from the invocation point this works to fill in all missing values from all levels such as:

f({a: 2})

f({a: 2, callback: { name: "abc"}})

f({a: 2, callback: { params: "456" }})

etc.

EDIT

In response to Joakim's comment:

TotalAMD also said in a comment that "I want to use several nested objects with same fields name". So if he tries that approach with callback1 and callback2 as arguments then he would have to use different field names in them.

I missed that original requirement. One way to maintain the desired, duplicated nested names within the function interface would be to alias them within the scope of the function, as follows:

function f({
    a = 1, 
    callback1: {name: name1 = "abc", params: params1 = "123"} = {},
    callback2: {name: name2 = "def", params: params2 = "456"} = {},
} = {}) {
  console.log(a);
  console.log(name1);
  console.log(params1);
  console.log(name2);
  console.log(params2);
}

You can then call the function with the designed interface and expected results:

f ({ callback1: { name: "One" }, callback2: { name: "Two" } })

Caveat: Whilst technically possible and potentially useful, this could get messy at deeper nesting levels. It might then be worth looking for an alternative interface design with less indirection.

ES6 Default Parameters in nested objects

4 Answers4