Clash Royale CLAN TAG#URR8PPP

ES6 destructing assignment [duplicate]

This question already has an answer here:

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 question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

destructuring

4 Answers
4

Consider this simpler example:

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



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

foo( bar: 42 );

42

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:

bar

baz

baz

true

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



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

foo( bar: 42 )

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

big

cords

x: 0, y: 0

radius

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.

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.

size = 'big', cords = x: 0, y: 0, radius = 25

optional object

The final = defaulting the entire argument object to make sure that it is not destructure to undefined.

=

defaulting

entire argument object

destructure

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

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)

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)


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

size

V2:

function drawES2015Chart( size ) 'big';



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

function drawES2015Chart( size = 'big' )