Automatic Array destructuring within function parameter?

Question

function getValues(param=[width, height]) {
   return `Width= ${width}, Height = ${height}`;
  }

The cod above doesn't work because "width" and "height" are not defined within the function body

But, the function definition below works fine and I am not quite clear why the array parameters are automatically destructured to its elements below, while it doesn't so in the above case.

 function getValues([width, height]) {
   return `Width= ${width}, Height = ${height}`;
  }

I would appreciate for any clarification here. Thank you.

Nikhil Aggarwal · Accepted Answer · 2018-05-31 11:39:59Z

1

Using = in arguments, is basically setting default value in case of missing parameter (Default parameters). Once, you call the function with missing parameter(s) or undefined as parameter, default value is set against the argument. In your example, if you pass any argument, the default value [width, height] will be ignored and if you do not, Uncaught ReferenceError will be thrown as width and height does not exist (provided not defined globally or in the function scope).

The following will give you value for width and height as the first parameter is assigned to width and second to height.

function getValues(width, height, param=[width, height]) {
   console.log(param); // [5,6]
   return `Width= ${width}, Height = ${height}`;
}
  
console.log(getValues(5,6));

But, the function definition below works fine and I am not quite clear why the array parameters are automatically destructured to its elements below, while it doesn't so in the above case.

This is in-accordance to the rules of Destructuring. Where if a parameter is an array, you can assign them into different variables based on index. e.g. here the first value in the array will be assigned to width and the second value will be assigned to height.

function getValues([width, height]) {
  return `Width= ${width}, Height = ${height}`;
}

console.log(getValues([5, 6]));

edited May 31, 2018 at 11:39

answered May 31, 2018 at 11:28

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

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

2 Comments

yibe Over a year ago

Thank you, your statement = in arguments, is basically setting default value clarifies half of my confusion. would you comment on my conclusion Array elements in the function argument are always destructured and available in the function definition as variables. Would this be valid conclusion? @Nikhil Aggarwal

Nikhil Aggarwal Over a year ago

They are always available and CAN BE destructured if required.

skovmand · Accepted Answer · 2018-05-31 11:21:29Z

0

Both functions are fine. In the second one the first value of the array is assigned to the width variable, and the second to the height variable in the function scope. Remember to call the function using an array.

function getValues([width, height]) {
  return `Width= ${width}, Height = ${height}`;
}

getValues([100,200]); // 'Width= 100, Height = 200'

answered May 31, 2018 at 11:21

skovmand

4,4525 gold badges28 silver badges32 bronze badges

1 Comment

skovmand Over a year ago

Ahh.. My mistake.. It would if the Ramesh's answer was used.

Ramesh Rajendran · Accepted Answer · 2018-05-31 11:38:57Z

0

first function have array values in assigned to the param function parameter
Second function have only the parameter as values.

You should try

function getValues(param=[width, height]) {
   return `Width= ${param[0]}, Height = ${param[1]}`;
  }

edited May 31, 2018 at 11:38

answered May 31, 2018 at 11:15

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

1 Comment

yibe Over a year ago

Yes, your code works fine, I have no issue with that. But, why array destructuring is not happening here, just like my second code? I am trying to understand when array destructuring happens in the function parameter.

Collectives™ on Stack Overflow

Automatic Array destructuring within function parameter?

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related