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

Guys the problem is that I don’t know what should I do exactly even I’ve read the lesson.
Please fix this 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(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

@armandesigner I’d say the first tip with this is that you need to make your function look as similar as you can to the second example provided…

So instead of bringing in ‘stats’, only bring in what you need from the class using { }

1 Like

So you’re giving the function half an object (stats). In this case, instead of just passing stats and then accessing the fields in the function, you can be specific about what fields in that object you’re going to use, and specify you just want to use them. So, for example:

const person = {
  name: 'Dan',
  age: 97,
  faveThing: 'Love Island',
  greeting: 'Salutations',
  bestFeature: 'chin',
};

And a function

function greet(person) {
  return `${person.salutation}, ${person.name}! I hear you like ${person .faveThing}!`;
}

I can be more specific about what I want to grab from that person object though:

function greet({salutation, name, faveThing}) {
  return `${salutation}, ${name}! I hear you like ${faveThing}!`;
}

So now, I’m still doing the same thing, but the code is being a bit more specific: it’s saying that I’m passing an object that should have the fields salutation, name and faveThing. Inside the function, using those names gives me the values for the fields.

It’s kinda most like:

function greet(person) {
  const salutation = person.salutation;
  const name = person.name;
  const faveThing = person.faveThing;

  return `${salutation}, ${name}! I hear you like ${faveThing}!`;
}
10 Likes

Can you just edit the main code.
I got a little bit confused :sweat_smile:

Hmm, if I do that it’s just the answer I’m afraid, the end result is extremely simple, I’ll try to think of a way to explain it. If you literally mentally swap greet for half and person for state

1 Like
const stats = {
  max: 56.78,
  standard_deviation: 4.34,
  median: 34.54,
  mode: 23.87,
  min: -0.75,
  average: 35.85
};
const half = (stats) => (((stats.max + stats.min) /2))

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

Is it true?

No, don’t pass stats in. You don’t need to change it to an anonymous function, just keeping it as function is exactly the same, you’re not doing anything differently to the first thing you posted at all.

So I’ll use my example again, sorry:

I have an object:

const person = { name: 'Dan', age: 97, faveThing: 'Love Island', greeting: 'Salutations', bestFeature: 'chin', };

I can pass it to a function like:

function greeting(person) {

or I can just say that function should accept an object and I would like some specific fields from it:

function greeting({name, salutation, faveThing}) {

Similarly you have an object

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

and your function can have it passed to it:

function half(stats) {

or…

4 Likes

Thanks a lot for taking time I got what you meant and I write the final 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 (max + min) / 2.0;
  };
  // change code above this line

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

Sorry for the confusing explanation!

1 Like

No problem, all in all thanks bro.

1 Like

I’ve struggled with this too, to be honest, I don’t know if I fully get the destructing thing altogether, I eventually work out what I need to do to pass the challenges, but am not really clear on how it works / the point of it etc…

for instance, in your Person / Greet example, how does the greet function know you are refering to the properties of the person object? what if you had two objects, lets say:

const cat = {
  name: 'Kitty',
  age: 3,
  paws: 4;
  whiskers: 50;
  colour: 'black',
};

const dog = {
  name: 'Doggy',
  age: 4,
  paws: 4;
  tail-type: 'short'
  colour: 'white',
};

then you call a function that takes the name and paws of the cat object:

function nameAndPaws({name, paws}) {
  return `${name}, has ${paws} paws!`;
}

At what point does the function know what object you are referring to?

I’ve progressed through the responsive web section quite easily, and the opening basic JavaScript module was fine, but then then struggled lots with the ES6 module! - once I’ve got through it all, I will probably come back to this module and do more research on these topics so I fully understand it all and can start using the concepts!

7 Likes

It ‘knows’ because you’re passing a specific object as a parameter to the function. It’s the same as:

function nameAndPaws(animal) {
  return `${animal.name}, has ${animal.paws} paws!`;
}

The parameter destructuring is a. To make it easier for JS to figure out early if there’s an error in the code, b. to make it clearer exactly what you’re doing from a human point of view ("this function accepts any object with the fields name and paws")

So calling the object is just:

nameAndPaws(dog);
nameAndPaws(cat);

And it works because the objects that the variables dog and cat reference both have name and paws fields.

You’re not generally going to see the benefits with tiny examples. Where it shines is with big objects with lots of fields. With destructuring you can be very specific about what you want to pluck out. This is really common: for example working with the DOM - if you select an element in a browser console and look at how it’s represented, every single one has this huge list of properties. If you’re writing code to manipulate that, destructuring cuts down the amount of code you need to write and makes your intent a lot clearer.

5 Likes

ahh, i think i’m getting it a bit better now, didn’t think about the way you then call the function, so basically your passing the object as a parameter to the function, but as you set up the function, you dont ask it for the full object as an argument, just the objects fields you want to work with - which then I suspect, rather than passing the full object over, it just finds the requested fields and passes them through instead…

right!?

2 Likes

Yup that’s basically it! It doesn’t make it any more efficient or anything, still does exactly the same thing underneath, it’s just more explicit - you might notice this about a few ES6 things, they do the same thing as < ES6 but are much more specific about what you’re doing, and will often break instead of hiding errors if you do something wrong (which is good).

This chapter of Exploring ES6 has a good deep dive into how it actually works [note: long, in depth & a bit technical but the author is a good teacher]:

http://exploringjs.com/es6/ch_destructuring.html

5 Likes

Thank you for the explanation!

Is is proper or improper to re-post the answer I made to this same question?
This question has been asked several times and I don’t know if everyone is reading every single post.
So, if someone would tell me not to do this, I’ll avoid it in the future.
But, I’m reposting in the hopes of helping someone reading this post who has not read the other post.

The key to understanding this challenge is to understand that the object being passed as a parameter to the inner function half() can be destructered right up front.

Consider this object;
const waterLevels1 = {high: 20.0, normal: 12.00, low: 10.0}

The call to the function is made here:
console.log( third( waterLevels1 )); // should be the sum of (high + low) / 3.0

Understand that waterLevels1 is an object with several properties.

What we’ve always done before is accept the whole object as a parameter which is what challenge starts out with.
return function third( todaysWaterLevels )) { etc…
Note: the parameter “todaysWaterLevels” accepts the object “waterLevels1”.

(Part of the confusion of the challenge is name of the parameter of the inner function is the same as the object it receives; if the parm name had been different from the object name, it might have made more sense. Example:
return function half( anyObjectWithMinAndMaxProperties ) {…etc…
)

So, what the challenge is asking us to understand is that the inner function can receive JUST specifically chosen properties so long as the passed object has those properties)

So, instead of a function that receives an object like this:
return function third(todaysWaterLevels) {…etc…

… the function can receive just the specific properties that are wanted without caring about the name of the object coming in
return function third( {high, low} ) {…etc…
return (high + low) / 3.0;

Does that make sense?

1 Like

this made it click for me thank you.

Instead of reposting the same text, you could just paste a link to the previous post of yours.

1 Like