Default Values ​​for ES6 Designer Object

Question

I am trying to define a Javascript class with a specific constructor with parameters with the most correct ES6 syntax. At first it is easy to define it like this.

let param1 = 10; let param2 = 'foo'; let param3 = 200; let param4 = 'bar'; let props = {id: param1, options: { op1: param2, op2: param3, op3: param4 }}; console.log('Object props'); console.log(props); class Test { constructor(props){ this.id = props.id; this.options = props.options; } } let test1 = new Test(props); console.log('Class test1'); console.log(test1.id); console.log(test1.options.op2); 

But when I try to use destructuring to determine the default values ​​for one of the constructor parameters ( op2 , properties of the nested options object), I cannot get it to work, whereas for the id property of the object that I can:

 let param1 = 10; let param2 = 'foo'; let param3 = 200; let param4 = 'bar'; let props = {options: { op1: param2, op3: param4 }}; console.log('Object props'); console.log(props); class Test { constructor({id = 'defaultId', options = { op2:'0'}} = {}){ this.id = id; this.options = options; } } let test = new Test(props); console.log('Class test'); console.log(test.id); console.log(test.options); console.log(test.options.op2); 

What I should expect is that when debugging with console.log(test.options.op2) prints the default value set in the constructor, but instead I get tt undefined .

I would also like to know if there is more suitable ES6 syntax when defining javascript classes to initialize class parameters.

Answer 1

But when I try to use destructuring to define default values

 constructor({id = 'defaultId', options = { op2:'0'}} = {}){ 

for one of the constructor parameters (op2, the property of options of nested objects), I cannot make it work, while for the id property of the object I can.

Default values ​​work only on one level of parameters / properties. If the argument or undefined not passed, {} will be used for the first parameter. If the object does not have an id property, 'defaultId' will be used. If the object does not have the options property, {op2:'0'} will be used. If you pass an object with the options property, the default value will be ignored.

So, if you want to get the default value for the op2 property of the object, if no such property was found in the object, you need to use the destructuring of the options object itself:

 constructor({id = 'defaultId', options: {op1, op2 = '0', op3} = {}} = {}) { this.id = id; this.options = {op1, op2, op3}; } 

Answer 2

In fact, you cannot add missing properties to an object since it was never added because the options object does not discard the default values. In this particular scenario, it would be much easier to go as follows:

 class Test { constructor({id = 'defaultId', options= { op2:'0'}} = {}){ this.id = id; this.options = options; this.options.op2 = this.options.op2 || '0'; } }