Javascript ES6: Deconstructing Arguments Challenge

Javascript ES6: Deconstructing Arguments Challenge
0.0 0

#1

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

What’s Happening:
Okay, so I am totally confused with this one. I am able to pass the test cases and the challenge, but I think my code is still wrong.

My Code


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) / 2.0;
  };
  // change code above this line

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

The problems:
To be clear the above code passes the challenge but I think it shouldn’t.

Firstly, I used stats.max and stats.min - in essence, I am directly referring to the global object variable stats, instead of using the {min, max} I deconstructed.

Secondly, from what I understand, destructuring’s syntax is:

const a = {x: 24, y:56, z:78}
const {x,y} = a; 

We are essentially asking for the x,y properties of object ‘a’ to be assigned to x and y. In the code, we are supposed to change the argument of the inner function, and I did it this way:

return function half({max, min}) { //version 1

If I change it to the following code, nothing happens (error, I presume):

return function half({max, min} = stats) { //version 2

I think the latter is the correct syntax - in version 1, we are not specifying the object from which we have to deconstruct the properties. Yet, version 1 works and version 2 doesn’t. How does the js compiler/interpreter/whatever decide WHAT object to get the properties from? When I defined another object with the same properties (min, max), execution did not happen again - so I’m guessing it got confused.

Thirdly, what’s with all the useless code? Why is there a function inside a function (that’s how I see it. Why not just define the function half() as:

const half = function ({min,max}){
    return (min+max)/2.0;
}

instead of whatever that complicated mess is up there?

Someone please help. I’ve been confused and stuck at this for an hour (despite clearing the challenge). :frowning:

TIA!

My browser information, if that’s of any use:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:60.0) Gecko/20100101 Firefox/60.0.


#2

I understand what’s happening in the second problem of mine now. We are sending the ENTIRE object as the argument to the function, and that is being deconstructed in the argument.

When we define a function as:

const myVar = (a){
   //code to do stuff
}
myVar(myObject);

The value of myObject is assigned to ‘a’. So, when we put the function argument as:

const myVar = ({prop1, prop2}){
   //code to do stuff
}
myVar(myObject);

I am essentially saying:
{prop1, prop2} = myObject
So the deconstruction makes sense.