ES6 destructing assignment

Question

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
});

I found this snippet on Mozilla's developer site under Destructuring assignment.
I was learning about ES6 destructuring assignment but have got bogged down here, I can't grasp how this function accepts an argument and sets default values?

This may help https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters#Destructured_parameter_with_default_value_assignment — Tom O., Aug 06 '18 at 14:58
What specifically did you not grasp? Did you try invoking the function with different values and look at the output? — Bergi, Aug 06 '18 at 14:59
Did you google the key words from your question "default", "values", "js", "function"? Because the first result would likely be [MDN's: Default parameters documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters) which would explain what is happening. After reading that, you should explain in greater detail what you aren't understanding so that we have jumping off point to answer your question. — zero298, Aug 06 '18 at 15:00
@Bergi, what is the use of the right side empty object assignment? — Henok Tesfaye, Aug 06 '18 at 15:07

Madara's Ghost · Accepted Answer · 2018-08-06T15:11:14.547

Consider this simpler example:

function foo({ bar }) {
  console.log(bar);
}

You can call this like foo({ bar: 42 }); and get 42 in the console.

But say you want a default parameter, you want bar and baz, but make baz optional, with a default value of true, you can do it like so:

function foo({ bar, baz = true }) {
  console.log(bar, baz);
}

Call that one with foo({ bar: 42 }) would result in 42, true.

Now say we want all of the arguments to be optional:

function foo({ bar = 42, baz = true }) {
  console.log(bar, baz);
}

foo({}); // 42, true
// however
foo(); // TypeError: Cannot destructure property `bar` of 'undefined' or 'null'.

Oops, you can't destructure a value that wasn't passed. So you need that parameter to have a default too:

function foo({ bar = 42, baz = true } = {}) {
  console.log(bar, baz);
}

foo(); // 42, true. Yey!

Therefore, for your specific example:

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

accepts one optional parameter, an object with three optional keys:

size is an optional key with a default value of big
cords is an optional key with a default value of {x: 0, y: 0}
radius is an optional key with a default value of 25

And because all of the keys are optional, we assume that empty input is equivalent to empty object, which would in turn use all of the default values for our keys.

NullPointer · Answer 2 · 2018-08-06T15:29:19.120

Here {size = 'big', cords = {x: 0, y: 0}, radius = 25} is a optional object and size, cords, radius are keys with default values while {} is making as optional.
The final = {} defaulting the entire argument object to make sure that it is not destructure to undefined.

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

drawES2015Chart();

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

score 0 · Answer 3 · answered Aug 06 '18 at 14:59

0

This Function accepts an Object with certain keys. Therefore you can destructure the object based on the keys. Using the assignment operator (=), this function also provides default values for each key (size, chords, radius)

answered Aug 06 '18 at 14:59

melvinv

134
5

score 0 · Answer 4 · answered Aug 06 '18 at 15:12

function drawES2015Chart({ size = 'big' }) {
  // do some chart drawing
}

//We invoke like this
let obj = { size: 'small'} 
drawES2015Chart(obj)

To give you a simple and clearer picture, we can look at exactly one parameter and see the steps before condensed. Originally the code will be as below:

V1:

function drawES2015Chart(parameter) {
  var size = parameter.size || 'big';
}

Then next we can condense a lil bit since we only using size in this method to below:

V2:

function drawES2015Chart({ size }) {
  var size = size || 'big';
}

Then at last we condensed again to set default value as below:

function drawES2015Chart({ size = 'big' }) {

}

ES6 destructing assignment

4 Answers4