The default argument value in ES6

Question

Is this the default argument in es6?

function list({ skip = 0, limit = 50 } = {}) { } 

What does this code do?

if it is list(skip=0, limit=50) , I can understand, but now I'm confused.

Answer 1

This function has destructuring and the default parameters are mixed.

Based on the signature of the function, we can say that we expect one argument, which should be an object.

 function list(myObject) { } 

If the arguments are not passed (or passed undefined ), we set the default value as an empty object, {} .

 function list(myObject = {}) { } 

Now, regardless of whether we pass the object, no arguments or undefined , myObject will not.

 // myObject will be {} for all 3 calls list({}) list() list(undefined); 

Then we destroy this myObject , extracting skip and limit from it:

 function list(myObject = {}) { let { skip, limit } = myObject; } 

In addition, we can perform this destructuring directly instead of the myObject parameter:

 function list({ skip, limit } = {}) { } 

Finally, in case skip or limit does not exist in the value that we are ending, we give them the default values:

 function list({ skip = 0, limit = 50 } = {}) { } 

Answer 2

It is called destructuring, and it can be difficult to understand if you are bogged down with = {} .

This is the equivalent in es5:

 function list() { var opts = arguments[0] === undefined ? {} : arguments[0]; var skip = opts.skip === undefined ? 0 : opts.skip; var limit = opts.limit === undefined ? 50 : opts.limit; } 

Is this very useful for passing configuration objects and eliminates the need to use the long list x == undefined ? foo : bar x == undefined ? foo : bar .

---

The reason for doing { skip = 0, limit = 50 } = {} is just part of the destructuring. skip and limit are properties of an unnamed object, which allows you to simply get property values ​​without reference to the object. You can say that they have been entered in the current area. When we do = {} , then if the right side object (currently empty) has a key called skip , then skip on the left side gets a new skip value on the right side, Similarly for limit . But since the object on the right does not have properties that correspond to any of the property names on the left, the properties of the left hand remain unchanged. In addition, the use for = {} is that we can call this method without any arguments, so the function receives default arguments as a parameter.

If this is still confusing, just remember that the only reason for = {} is to act as the default parameter for the function, which allows us to call the function without arguments. In addition, this does not affect the values ​​on the left side of this expression due to the indicated reasons.

Literature:

https://simonsmith.io/destructuring-objects-as-function-parameters-in-es6/ https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/

Answer 3

The function expects an object with the skip and limit parameters and sets the default values, if none exist. See the Usage Example below to understand it more clearly.

 function list({ skip = 0, limit = 50 } = {}) { console.log(skip); console.log(limit); } // No args list(); // skip changed. Note the object list({skip: 2}); // limit changed. Note the object list({limit: 2});