Destructuring Assignment to Pass an Object as a Function&

JavaScript
1

What is the point of destructuring it if I can use other properties of the object without destructuring them all the same??
Here: I’ve destructured the max and min property from stats object, but what’s the point when I can use them directly all the same? Like I have done with stats.mode.


const stats = {
  max: 56.78,
  standard_deviation: 4.34,
  median: 34.54,
  mode: 23.87,
  min: -0.75,
  average: 35.85
};
const half = (function() {
  "use strict"; // do not change this line

  // change code below this line
  return function half({max, min}) {
    // use function argument destructuring
    return (stats.max + stats.min + stats.mode) / 2.0;
  };
  // change code above this line

})();
console.log(stats); // should be object
console.log(half(stats)); // should be 28.015

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-pass-an-object-as-a-functions-parameters/

2

There is nothing you can do with destructuring that you couldn’t do without - it just will take more typing. And may leave you open to more errors. (more typing = more chance for typos) And I would argue that it is more readable.

But the originals works:

  return function half(stats) {
    return (stats.max + stats.min) / 2.0;
  };

But you didn’t use the descructured variable:

return (stats.max + stats.min + stats.mode) / 2.0;

and for some reason you added in the mode. This only works because stats is a global variable. You were supposed to use the local variables (min and max) inside that function.

return (max + min) / 2.0;

Destructuring is a neat little tool that makes code more readable. You’re going to see a lot of it so you might as well get used to it. And eventually you’ll probably see why we all like it so much.

1 Like
3

@kevinSmith is right - you will eventually see why folks really like destructuring assignment. (Like Brussels sprouts,) I came to eventually appreciate this but it took a long time. (Same with arrow functions.) You’ll get there too.

I know it looks like it but you aren’t really passing anything that gets used in your function. Notice that (after removing + stats.mode) passing any object with max and min properties will yield the same answer.

console.log(half({max:"cow",min:"pig"})); // 28.015
console.log(half({max:1000000000,min:1000000000})); // 28.015

Using destructuring assignment in this case will also protected your object properties from accidental tampering because the primitives are destructured as copies. Passing an object as a parameter creates a greater possibility that some oversight in your code will mutate the object in unexpected ways. DA can defend against that.

const half = (function() {
  "use strict"; 
  
  return function half(s) {
    const k = 273;
    s.max += k; // oops! The obj.prop is changed
    s.min += k; // oops again!
    return (s.max + s.min) / 2.0;
  };
})();
console.log(half(stats));