unclear on ES6 destructuring function parameter defaults

Question

So in the MDN documentation for destructuring function defaults it gives the following example.

function drawES2015Chart({size = 'big', cords = {x: 0, y: 0}, radius = 
25} = {}) {
  console.log(size, cords, radius);
  // do some chart drawing
}

drawES2015Chart({
  cords: {x: 18, y: 30},
  radius: 30
});

However I can run this example with the first line as function drawES2015Chart({size = 'big', cords = {x: 0, y: 0}, radius = 25})

so leaving out the ={} part. I'm not sure why this works and what the advantages would be to using the longer form if the shorter form is in fact equally correct.

What happens when you pass in `nil`/`undefined`/nothing in your version? (E.g., w/o the `= {}` default.) — Dave Newton, May 17 '17 at 14:25
@DaveNewton you still get an exception when passing `null`, because it does not trigger the default value substitution — Paolo Moretti, May 17 '17 at 14:35

score 5 · Accepted Answer · answered May 17 '17 at 14:28

Refactoring the function as you suggest:

function drawES2015Chart({size = 'big', cords = {x: 0, y: 0}, radius = 25}) {
    console.log(size, cords, radius);
}

Would cause an error when attempting to call it with no arguments:

drawES2015Chart(); // throws TypeError

However, you may call it as:

drawES2015Chart({});

So, what the = {} is doing at the end is making you able to invoke

drawES2015Chart();

Which will be defaulted to

drawES2015Chart({});

Which will be defaulted to

drawES2015Chart({size = 'big', cords = {x: 0, y: 0}, radius = 25});

score 4 · Answer 2 · answered May 17 '17 at 14:26

The final = {} defaulting the entire argument object to make sure you don't try to destructure undefined if someone called your function without any arguments at all (drawES2015Chart({}) vs drawES2015Chart())

If you didn't have this guard:

function foo({x = 10}) {
  return x;
}

foo(); // TypeError: can't convert undefined to object
foo({}); // 10

score 0 · Answer 3 · answered May 17 '17 at 14:29

0

Try delete = {} and execute drawES2015Chart();

It prevents undefined from being destructured.

answered May 17 '17 at 14:29

Reski

169
7

unclear on ES6 destructuring function parameter defaults

3 Answers3