I'm currently practicing destructuring on freecodecamp and came across this case

const stats = {
  max: 56.78,
  standard_deviation: 4.34,
  median: 34.54,
  mode: 23.87,
  min: -0.75,
  average: 35.85
};

CASE : Use destructuring assignment within the argument to the function half to send only max and min inside the function.

// Only change code below this line
const half = (stats) => (stats.max   stats.min) / 2.0; 
// Only change code above this line

I'm supposed to use destructuring method on the arrow function and the solution was to remove the word stats, which is the name of the object. This is supposed to be the answer:

const half = ({max,min}) => (max   min) / 2.0; 

What i want to know is why don't i need to refer max & min inside the parameter bracket to the stats object? how does the code knows which max & min is the function referring to?

CodePudding user response：

Because it is the first argument.

For comparison, consider this:

const regular = (first, second) => console.log(`regular: ${first.foo} and ${second.bar}`);

const destructured = ({foo}, {bar}) => console.log(`destructured: ${foo} and ${bar}`);


const x = { foo: 1 };
const y = { bar: 2 };

regular(x, y);
destructured(x, y);

CodePudding user response：

"The Modern Javascript Tutorial" writes:

The destructuring assignment also works with objects.

The basic syntax is:

let {var1, var2} = {var1:…, var2:…}

We should have an existing object on the right side, that we want to split into variables. The left side contains an object-like “pattern” for corresponding properties. In the simplest case, that’s a list of variable names in {...}.

Notice how the same names occur on both sides.

For instance:

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

Properties options.title, options.width and options.height are assigned to the corresponding variables.

The order does not matter. This works too:

// changed the order in let {...}
let {height, width, title} = { title: "Menu", height: 200, width: 100 }

The pattern on the left side may be more complex and specify the mapping between properties and variables.

If we want to assign a property to a variable with another name, for instance, make options.width go into the variable named w, then we can set the variable name using a colon:

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// { sourceProperty: targetVariable }
let {width: w, height: h, title} = options;

// width -> w
// height -> h
// title -> title
alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200

And it works exactly the same way in a function call. After all, a function call is executed by assigning the argument to the parameter, so if you write

const calculateAvg = ({min,max}) => (min   max) / 2.0;
const avg = calculateAvg(obj);

It's executed as if you had written

const {min, max} = obj; // assign argument to parameter
const returnValue = (min   max) / 2.0; // execute the function
const avg = returnValue; // assign the return value 

So when you write:

({max,min}) => (max   min) / 2.0; 

it defines a local variable max that receives the max property of the object passed, and a local variable min that receives the min property of the object passed.