JavaScript default parameters for function

Question

I can fully understand ECMAScript 6 has created a lot of potential way of handling with functions such as arrow functions.

Since I'm not very familiar with the new stuff, when talking about default parameters for a function. How to interpret the differences between the following way of defining functions:

Function 1:

function m1({x = 0, y = 0} = {}) {
  return [x, y];
}

Function 2:

function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

I think with javascript you can do it with another approach. it would be something like function m1(x) { x || (x=0); } — Husamuddin
– Husamuddin, Commented Feb 7, 2017 at 15:27
@lsqleakey are you asking how to create an arrow function with default vars in ES6? — Z-Bone
– Z-Bone, Commented Feb 7, 2017 at 15:31

lonesomeday · Accepted Answer · 2017-02-07 15:42:27Z

4

The difference is clear when you try passing something to your functions:

m1({}) // [0, 0]
m1({z: 1}) // [0, 0]
m1({x: 1}) // [1, 0]

m2({}) // [undefined, undefined]
m2({z: 1}) // [undefined, undefined]
m2({x: 1}) // [1, undefined]

Your first syntax (m1({x = 0, y = 0} = {})) does three things:

First, it provides a default first argument to the function, which is an empty object. If no first argument is given (m1()) then the default empty object is used (i.e. it becomes m1({}))
Second, your code extracts the x and y properties from that object.
If either is undefined, it is given a default value 0.

m2({x, y} = { x: 0, y: 0 }) does something quite different:

First it provides a default first parameter to the function, which is the object {x: 0, y: 0}. If no first argument is passed, that object is used. If any argument other than undefined is passed, that value is used instead.
Second, the code extracts the x and y properties from that object. If they are undefined, that's what you'll get.

The first option (a parameter with a default value that is destructured with more default values) is almost certainly what you want. The second option means that your code does not have sensible/useful default values for the property if arguments are passed.

edited Feb 7, 2017 at 15:42

answered Feb 7, 2017 at 15:37

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CodingIntrigue Over a year ago

m2() will produce [0,0]. m2({}) would be [undefined, undefined]

lonesomeday Over a year ago

@CodingIntrigue Thanks: that is of course what I meant.

CodingIntrigue Over a year ago

Assumed so, great explanation, nice breakdown

Sebastian Simon · Accepted Answer · 2017-02-07 15:37:42Z

m1 provides default values for x and y, whereas m2 merely destructures x and y from a provided object and only provides default values if the object itself isn’t provided:

m1({}) will return [0, 0]
m2({}) will return [undefined, undefined]
Both m1() and m2() will return [0, 0]

m1({x: 10}) will return [10, 0]
m2({x: 10}) will return [10, undefined]

So, if m2 receives an object, it will destructure the available values to the variables x and y. If any of them is missing, it’s undefined. Only if the whole object is missing, it’ll provide a default object ({ x: 0, y: 0 }) from which to get the values.

m1, however, provides default values for both properties even if they’re missing. And if the whole object is missing, it’ll still provide those default values.

Collectives™ on Stack Overflow

JavaScript default parameters for function

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related