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

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

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.

… 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' }