Use Destructuring Assignment to Pass an Object as a Function's Parameters

Would anyone explain this or at least give the solution?

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(stats) {
// 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

2 Likes

The problem wants you to destructure the object inside the function call parameters so that you can treat the attributes of stats as if they were passed one by one to the function. Don’t forget to change stats.min and stats.max to just min and max.

return function half({min, max}) {
// use function argument destructuring
return (max + min) / 2.0;
};

7 Likes

I am not at my desk so I can’t confirm this for sure. I believe to pass that last objective to the challenge you do have to destructure in the function call parameter list but only assign max and min.

Okay I was able to confirm that to satisfy the challenge the destructuring did have to happen in the argument list and you are only to send max and min

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

I think the setup is overly complex and the only reason for it might be the need for “use strict” in certain browsers.
The 2 code blocks below seem to accomplish the same thing but the first one uses a function inside of a callback function. However, the second one does not support "use strict".

const half = (function() {
  "use strict"; // do not change this line
  // 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
})();
const half = function() {
    // use function argument destructuring
    return (stats.max + stats.min) / 2.0;
  // change code above this line
};

Please correct me if I am wrong.

2 Likes

I think the use strict was to force you to perform the D structuring in the inner function

Thank you, I managed to solve it.

As you said, the point of this problem was : function argument destructuring

forgive me but i cannot seem to grasp why the final return statement is wrapped in parenthesis… could someone explain?

Thanks!

1 Like

Because you want the addition of max + min to happen before dividing by 2.0.

Order of operation without ( ) would be to divide min by two then add it to max.

This occurs because of Operator Precedence. Let’s say you just return

max + min / 2.0;

What this would do is divide min by 2 and then sum this value with max because divisions and multiplications occur before sums and subtracions.

In example, if max == 4 and min == 1, it would return 4 + 1 / 2.0, which equals to 4 + 0.5 == 4.5.

What we want instead is for the sum to occur before the division (4+1) / 2.0, returning then 5 / 2.0 == 2.5. In order for that to happen we need to wrap the sum in parenthesis, this tells the interpreter we want the sum to be done before the division.

In the original code here,

“use strict”; // do not change this line

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

Function half take a parameter  as an object which is status and return average of min and  max . for that case to access status object literals you have used period '.' operator. Clear ??

Now challenge is,

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

let's look at this example 

const profileUpdate = ({ name, age, nationality, location }) => {
/* do something with these fields */
return ‘I am’ + name + ‘from’ + location;
}


In short, ES6 allows extracting literals from an object. Please read this link for more details explanation: https://simonsmith.io/destructuring-objects-as-function-parameters-in-es6/

Now try it your self for the challenge.  Good luck.

Happy coding :slight_smile:
 
Monika.
1 Like

Would this code work as well?

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**({min, max} = stats)** {
    // 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

This doesn’t pass the test but I wanted to check if making the object name explicit would work as well.

It does work in this case because you have supplied a default parameter and that inner function has access to stats whether you pass it in the function call or not. If the function and stats were not in same scope that would not work though

console.log(half()); // should be 28.015 would also return the desired answer.
console.log(half({max:400,min:300})); // should be 350 overrides the default.

I used:

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

The code works, but it failed the ‘Destructuring was used’ test during the checks. I’ve tried a few other ways to incorporate destructuring assignment and they all fail the checks, so I’m going to move on. I found this resource quite useful: http://exploringjs.com/es6/ch_destructuring.html as the section was a bit light on explanation.

1 Like

Hi

Your solution ‘works’ in that will return the correct answer

AND

it does employ destructuring assignment

BUT

the test was specifically for destructuring in the function arguments list so it fails the challenge

Here is example showing subtle differences

const person = {name:"Bob", age:23, occupation:"Defender of the Universe"};

// destructing assignment in function arguments
function whoIsThisDude({name,occupation:job}){
  console.log(`Hi! I'm ${name}. I'm a ${job}`);
}
whoIsThisDude(person);

// destructuring assignment inside function
function whoIsThisDude2(someDude){
  const {name, occupation:job} = someDude;
  console.log(`Hi! I'm ${name}. I'm a ${job}`);
}
whoIsThisDude2(person);

Hope this helps

5 Likes

Hey!! Aha!! So helpful thankyou!!

I’ve since tried:

const half = (function() {
“use strict”; // do not change this line

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

})();

And still shows the same error. Without being able to change the code above the line, i’m not entirely sure how to complete this one!

You don’t need to explicitly say that {min, max} belong to the stats object in your function parameter list.

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

is the same as writing

const {min, max} = stats;
console.log((min + max) / 2.0);

Because you give stats as a single argument to your function call, your parameters in the function definition {min, max} are automatically taken as properties of the stats object.

3 Likes

I’m sorry but I have to have a moan about the destructuring exercises in general: the examples are very misleading and overly complicate the answers being tested.

This last one too, the examples are convoluted and the test includes a return statement in a function declaration where the ONLY code to edit is in the function call! It seems like an unnecessary amount of complexity just to note that: the function calls the object as an argument, the curly braces in the function declaration argument parenthesis can contain object attributes.

Seriously, there has to be a better way to explain this, because I grok the syntax++, but these examples are throwing me off. Can we have a rewrite by someone with communication skills, please?

18 Likes

This challenge needs a clearer example of what it expects. Everything is very confusing at this point because the syntax is explained quite vaguely. We have some specific examples that look nothing like the syntax that’s expected. What is the extra () even for at the end of the function within a function that’s the same function? Consistency in teaching is key.

11 Likes

These exercises seem poor at teaching the concepts at hand. Not sure why each exercise is overly complex and confusing. At this point I’m more likely to remember getting the desired results but failing the exercises than actually remembering the concepts being taught.

6 Likes