I don't know why the solution works - Use Destructuring Assignment to Pass an Object as a Function's Parameters

I don't know why the solution works - Use Destructuring Assignment to Pass an Object as a Function's Parameters
0

#1

Tell us what’s happening:

The function “Half” does not make any reference to the “stats” object above. How does it know what to pull data from? What does min and max mean without this context? Why does this work?

Also why does the ‘half’ function have all that garbage at the tail? })(); Why is the function in parentheses? Nothing about java makes any sense to me.

Your code so far


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 (max + min) / 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/69.0.3497.100 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

You’re not alone in your confusion over this challenge. Quite a few folks have been perplexed by the way this one was presented. Similar questions are frequently in the forum.

That’s an IIFE. You can do some cool stuff with one but I’m not sure why / if it was necessary here.

The real take-away from this is the destructuring.


#3

Your code has been blurred out to avoid spoiling a full working solution for other campers who may not yet want to see a complete solution.


#4

Actually, it does make the reference in the final line (shown below).

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

All you need to change in this challenge is the part specified to change by the comments:

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

The challenge explains how you can destructure a function’s parameters. In this case, there is one parameter named stats. Since the global variable stats gets passed into this function, then all you need to do is destructure the object into two variables (min and max) which are properties in stats. Then, in the return statement, you would replace stats.max and stats.min with the applicable variables that were created via the parameter destructuring.


#5

… had to run an errand

The stats object is sent to the function by this function call half(stats). You might need to read up on functions and function calls if this isn’t clear.

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

// either would be called this way
half(stats)

Both are sent the entire object as a parameter but the second one …

  1. Only “cherry picks” the two property values it needs and cannot access the rest of the object.
  2. This offers some protection against you against accidentally changing another part of the object - you only have access to the properties you destructured
  3. Since the properties desctructured are primitives (not arrays, not objects, etc) you are working on a copy, not the original object property so you are doubly protected against accidentally mangling the object.
const person1 = {name:"Ben",job:"Intergallactic Pro Asteroid Surfer"}


// THIS
// destructuring offers some protection against mutation
function personSafe({name,job}){  
  name = "Neb";
  job = "Underemployed bed pan cleaner";
}

personSafe(person1); // sending person1 to personSafe
console.log(person1); // still Ben  :)
// { name: 'Ben', job: 'Intergallactic Pro Asteroid Surfer' }


// VS THIS
// not protected against mutating object
function personMangled(per){
  per.name = "Neb";
  per.job = "Underemployed bed pan cleaner";
}

personMangled(person1);  // sending person1 to personMangled
console.log(person1);  // sorry Ben, or Neb :(
  //{ name: 'Neb', job: 'Underemployed bed pan cleaner' }