prints two values without destructuring

Question

i'm trying to learn javascript destructuring and got stuck, did not find similar to this so im asking if somebody could enlighten me. I have two kind of question 1: here i have destructure in argument ( is it destructure?) and above i have function without destructure it prints {size: 7, radius: 4}25, my question here is why it prints 25 also ? like now it has printed both 'radius's' shoudnt it print just one 'radius(4)' ?

function drawChart(size = 'big', radius = 25 ) {
  console.log(size, radius);
} 
 
drawChart({size:7, radius:4} );

2: Now i have put curly braces inside function and there is also curly braces inside argument (which one is destructuring (object destructuring?), both or just above ?), it prints '7 4', now here is not 25, why ?

function drawChart({ size = 'big', radius = 25 } ) {
  console.log(size, radius);
} 
 
drawChart({size:7, radius:4} );

if somebody could clarify this i would appreciate it

In both cases you're passing a _single_ variable (an object) to the function. Your first function accepts 2 arguments, and you're giving it only the first one. A second argument is not given, so the default value of 25 is used. — Al.G., Jul 12 '20 at 14:19
In first example , it treats the object as size and override the default value of size and use the default value of radius . In second one , just the default values are overriden! — Harmandeep Singh Kalsi, Jul 12 '20 at 14:20
I think [this MDN web docs for destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Unpacking_fields_from_objects_passed_as_function_parameter) might be helpful. — Gorisanson, Jul 12 '20 at 14:25
@Gorisanson actually that is what i have been reading and did not get that, destructuring inside function — , Jul 12 '20 at 14:27
First example you. are using [default parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters#:~:text=In%20JavaScript%2C%20function%20parameters%20default%20to%20undefined%20.&text=This%20is%20where%20default%20parameters,value%20if%20they%20are%20undefined%20) in the second example you're using destructuring, and your setting defaults to the properties (so if they don't exist, they. take the value of the default). — Nick Parsons, Jul 12 '20 at 14:29

score 2 · Answer 1 · answered Jul 12 '20 at 14:23

2

For your first function, here is what's happening:-

Both size and radius function parameters are primtives of type string and number with default value of big and 25.

Now you call drawChart({size:7, radius:4}) which essentially sets your function parameter size equivalent to {size:7,radius:4} and radius is not set to anything but holds the default value of 25.

So the output is

{
  "size": 7,
  "radius": 4
} 25

For your second function :- You have actually used destructuring here for your function parameters. You pass in only one parameter here and that's the object {size:7, radius:4}. So at runtime, size with default value of big gets set to 7 and radius with default value of 25 gets set to 4.

So the output is

7 4

I hope this made sense.

answered Jul 12 '20 at 14:23

Lakshya Thakur

8,030
1
12
39

'size equivalent to {size:7,radius:4} and radius is not set to anything', but isnt radius set to 4 like size is set to 7 ? – Jul 12 '20 at 14:28
No that radius has nothing to do anything with the radius inside the {size:7,radius:4}. {size:7,radius:4} in itself is one parameter since its an entire object. Now since your first argument of function is size, it gets assigned to {size:7,radius:4}. And radius is not set to anything because you didn't supply a second argument so it takes its default value of 25. – Lakshya Thakur Jul 12 '20 at 14:31
so how to fix the first one, that it would work like second one without using curly braces ? – Jul 12 '20 at 14:34
2

There is no need to fix the first function because it serves a different purpose. Use the second destructuring one for your purpose since you're just passing an object to the function and you would like to have each key of the object as separate usable variable in your function. If you want to pass size,radius as separate parameters rather than as keys in a single object, then you use first function. – Lakshya Thakur Jul 12 '20 at 14:36

AJ_ · Accepted Answer · 2020-07-12T14:42:27.280

In example 1, drawChart({size:7, radius:4}) passes a single object argument to the drawChart() function. However, you have declared drawChart() to accept 2 arguments. This means that in the function, the size parameter will be equal to {size:7, radius:4} while the radius parameter takes on its default value of 25.

In example 2, you are defining drawChart() to only take 1 argument that is an object, and from that object you are using destructuring to get the size and radius attributes.

To get example 1 to work like example 2 without using curly braces, you can have drawChart() accept a single object and then access that object's attributes.

function drawChart(data) {
  console.log(data.size || 'big', data.radius || '25');
} 
 
drawChart({size:7, radius:4});
drawChart({size:7});
drawChart({radius:4});

How to fix the first one, that it would work like second one without using curly braces ? — , Jul 12 '20 at 14:38
I added a code snippet to my answer that provides a way to make it work without curly braces. — AJ_, Jul 12 '20 at 14:43

score 0 · Answer 3 · answered Jul 12 '20 at 14:25

0

I think what you are looking for is like so:

function drawChart(props) {
  const { size, radius } = props;
  console.log(size, radius);
}

answered Jul 12 '20 at 14:25

Dean

5,884
2
18
24

prints two values without destructuring

3 Answers3