Destructuring Assignment to Pass an Object as a Function&

Destructuring Assignment to Pass an Object as a Function&
0.0 0

#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.


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

#4

Adding to @alhazen1 and @kevinSmith, if you really get into functional programming, you will learn that you never want to work with global variables inside your functions. You always want to pass in anything you want to work with or manipulate. With destructuring assignment you can pass in just the properties of an object you want to work with and never affect the original object at all. @alhazen1’s example of mutating the original object is a great reason to avoid manipulating globals.