How does the function know which object to use to find the values?

JavaScript
1

Tell us what’s happening:

In this example, the reference to stats is removed. It’s unclear as to how the const half knows to look for the max and min variables inside the const stats (because the reference to stats has been removed.

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
};

// Only change code below this line
const half = (stats) => {
  const { max, min); 
  }
} 

// Only change code above this line

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.122 Safari/537.36.

Challenge: Use Destructuring Assignment to Pass an Object as a Function’s Parameters

Link to the challenge:

2

Hello there @mmmmm,

If you actually look at the test results
image
It shows that half(stats) should be 28.015. This means, in the background/behind the scenes, there is a code run to check your code. So essentially this code exists in the background:

half(stats)

This is the part of the test, so technically, stats is referenced, just in the background, where you can’t see it to test your code.
Hope this helps :slight_smile:

3

Hi @Catalactics, thanks for the note.

I’m afraid your note doesn’t help at all.

const half replaces the reference to (stats) - so that reference is no longer used. I don’t understand why. Is there a list of rules somewhere that tells me how the solution (which does not refer to the word ‘stats’) knows how to find ‘background instructions’ to process variables defined in that object?

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

half is a function that is not called in the editor, when called you need to pass in an object that has the min and max property, like the tests do calling half(stats)

5

But that’s not what is happening in the posted solution.

The solution posted is:

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

I can’t understand how that solution knows that min and max are defined inside stats.

6

It’s unclear in the explanation of the example as to how profileUpdate knows that the arguments used in that function are defined in the profileData object and for the same reason, I can’t understand how the challenge works to allow const half to find out that max and min values are defined inside const stats. It doesn’t make sense. I’ve been googling this topic for an explanation all day. If you could help me find an answer (even if there is someone that knows what the ‘background’ steps that previous answers reference, then I can search for an explanation of those concepts to try and figure this out myself. Thank you.

7

You have a function, half, which has as parameter {max, min}, or an object with a max and min parameter, it doesn’t know anything else

to actually connect the half function with any object you need to call the function, as half(stats)

you could also have a different object with those properties: const bananas = {max : 43, min: 32}
you can do the same with this object, you can call half(bananas), this one results in 37.5

on its own the function half doesn’t know anything about any object around it, to actually use the funtion you need to call it with the object.

Even when it was const half = stats => (stats.min + stats.max) / 2
this doesn’t mean that it is using the stats object, just that the parameter is called stats, also in this case you need to actually call the function with the stats object as argument for anything to happen, like half(stats), or half(bananas)

1 Like
8

But then how is the const half function using the values stored in the min and max arguments defined in the const stats? If that’s not the same stats as the one referenced?

Is there a name for the principle involved in this step? I can’t understand this response. I need to get further toward the basics to understand what it is that you are describing.

Thank you

9

Also, I dont understand how to reconcile your answer with the code explanation posted in the hint. That explation says:

Code Explanation

Notice that we are destructuring stats to pass two of its attributes - max and min - to the function. Don’t forget to the modify the second return statement. Change stats.max to just max , and change stats.min to just min .

So – if the max and min that are being used in const half are not the arguments defined in const stats, what is going on in this exercise?

I wish I wasn’t so utterly stupid, but I actually can’t make sense of this at all.

Thank you for trying to help. Where do people who are too stupid to learn on this platform go for the dummies guide to this subject?

10

first, functions have parameters:

function myFunc (a, b) { /*do something with a and b */ }

when you call the function you pass values in those parameters
for example myFunc(7,8), there is an implitic a = 7, b = 8 when the function is called, the values of the parameters are defined based on the arguments passed in the function

in case of destructuring the parameters you have the same behaviour, but with the added feature of also extracting the values of the object properties, for example in the case of the half(stats) function call, there is {min, max} = stats (or {min, max} = bananas for the half(bananas) function)
when the function was const half = stats => (stats.min + stats.max) / 2 you had an implicit stats = stats, which is “takes the stats object passed as argument and assign it to the stats parameter” (this is a good argument for why you should have different names for function parameters and global objects, to avoid confusion)

object destructuring is an other topic that can be a bit confusing.
but if you understand how arguments are passed in as parameters values, and how an object can be destructured, then we can put together the two things with “destructuring in place” for the function parameters

now, object destructuring

let description = {eyeColor: "blue", hairColor: "blonde"};
let {eyeColor, hairColor} = description;
let message = "My friend has " + eyeColor + " eyes and " + hairColor + " hair."
console.log(message); // "My friend has blue eyes and blonde har."

what destructuring does is extract properties from the object so that they can be more easily referenced. Witout destructuring we would need to write description.eyeColor and description.hairColor

11

Let’s reimagine half as a function without parameter destructuring:

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

In this case, we expect the consumers of this function to provide it two inputs, a max, and a min. Like so:

half(20, 10)

Now let’s imagine it with a single object parameter:

const half = someObj => (someObj.max + someObj.min) / 2.0;

In this case, we expect the consumers of this function to provide it one input, an object that has a min and max property. Like so:

half({ max: 20, min: 10 })

Maybe the object has other properties as well, it doesn’t matter because we don’t look at them.

Now with destructuring:

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

In this case, again we expect the consumers of this function to provide it one input, an object that has a min and max property. Like so:

half({ max: 20, min: 10 })

Notice the calling of the function is exactly the same as the example above. Likewise, as I said above, the object might have other properties, but we just don’t look at them.

Now, I think you’re concerned about what if the max and min properties aren’t defined on the object that the consumer provides. Well, then they’re undefined. That’s all.

12

Thanks @colinthornton, are you saying that if there were 20 functions defined, the solution to this exercise would look inside all of them to see if any of them had properties called min and max?

If so, how does the half function decide which object to use inside the function? It seems flimsy to not be specific about whether you want the properties from stats or profileData etc.

13

Thank you everyone for trying to help me with this.

14

Oh - wait. I understand what you’re saying now. In the test, stats is passed into half, so that’s how it knows which function to look at to find max and min.

Thank you. I understand now.

1 Like
15

Sorry, I think part of the problem is that the starter code includes this object called stats, and it’s making you think that the stats object and the half function are somehow connected. They’re not, at all.

The line const half = ... is a function definition. It will allow you to call the function later. But in this exercise (and just about all the other exercises in freeCodeCamp), it’s the test suite that calls the function with various inputs to test that it works, not you.

What I was trying to get across is that when you define a function with paramenters, all you’re doing is setting an expectation that when someone (yourself, or the test suite, or a teammate) calls your function, that they provide parameters of the correct type.

So in this case, they might be using that stats object, they might have made a completely different object and passed that, they might not have passed a parameter at all (they’d get runtime errors).

// Assigning some variables
const foo = 1;
const bar = 2;
const baz = 3;

// defining a function - there is no link
// between this function and the variables above
function double(num) {
  return num * 2;
}

// We can call functions with any parameters we want
// We just expect people to call it with a number
double(foo) // 2
double(bar) // 4
double(baz) // 6
double(10)  // 20

// Unexpected inputs, there's nothing in JavaScript to stop
// people from calling your function with random junk
double()    // NaN
double([5]) // 10 for some reason
double({ name: 'colin' }); // undefined

My point was just to stop looking at the stats object, it’s irrelevant to your goal with this exercise, which is to

define a function called half, that destructures the max and min properties from its first parameter, and returns their average

Notice I didn’t mention stats anywhere in that sentence.