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

JavaScript
#1

Tell us what’s happening:
I know how to solve the program, but I want to know, in this case, how does the program know that I want to take max and min as parameters from the object named stats, maybe in some other case there may be multiple objects with the same property(i.e. max and min)

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 = ({max,min}) => (max + min) / 2.0; 
// Only change code above this line

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36 Edg/87.0.664.66.

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

Link to the challenge:

1 Like
#2

It doesn’t know. The function has no concept of what is happening outside of it. All it knows is that it expects to be passed an object and that object should have those two properties. In theory this function could also work with a completely different object with a different shape, but as a long as it has those properties, it will work.

In JS, you are responsible for keeping track of what you pass to what and that all the types are correct. There are extensions of the language like TypeScript that help with that, but that’s something for the future.

2 Likes
#3

No mistery. A way to see it is

In the function argument, you’re saying

const max = stats.max
const min = stats.min

And this is the same as

const { max, min }  = stats

But the problem with that exercise is that, as you suspect, the function is executed under the hood:

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

As long as you pass:

half(Object)

Which is done under the hood by FCC.

1 Like
#4

no, that wouldn’t work
object destructuring need the property names

what would work is

function half({max: hello, min: world}) {}

but why do that?

1 Like
#5

Well, you wouldn’t do that.

@Brijesh Object is stats, I missed that.

1 Like
#6

You can see the function call in the tests - that’s how the function knows that it should destructure the stats object:

fcc

2 Likes
#7

It still passes the tests for me with the way the code is.

#8

So in that case, if there are multiple objects with the same property (max and min) but with different values. What’ll happen in that case?

#9

The function is “dumb”. All it knows is that it is being passed an object and it should extract those two properties. It doesn’t care what it is, what it is called, or what it was sent before:

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

const obj1 = { min: 10, max: 20 };
console.log(half(obj1));
// 15

const obj2 = { min: 20, max: 30, something: 'else' };
console.log(half(obj2));
// 25

const obj3 = { };
console.log(half(obj3));
// NaN

const arr = [1, 2, 3];
arr.min = 30;
arr.max = 40;
console.log(half(arr));
// 35

const func = function() { console.log('howdy'); };
func.min = 40;
func.max = 50;
console.log(half(func));
// 45

Notice that (in JS) arrays and functions are objects two. In fact, you could send it any value except for null and undefined. If you sent it a string it would see that you’re trying to destructure and would convert it to an object (but those properties would just be undefined - so it would be like the 3rd example, evaluating to NaN.)

1 Like
#10

Well if you give it one of them it will use the values.

Like, the object could be this

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

Or this:

const stats = {
  min: 123445678,
  max: 999999999,
}

Or this:

const stats = {
  foo: 1,
  bar: 2,
  baz: 3,
  min: 4,
  max: 5
}

Or this (which will cause an error because you can’t divide strings):

const stats = {
  min: "I should be a number",
  max: "me too!",
}

This function just takes an object, and it tries to grab the values of the min and max properties from it. It doesn’t “know” anything – JS only checks the types of things when it runs, so if the object doesn’t have those properties (or it does but the properties aren’t numbers), it will break. But if it does have those properties and their values are numbers, it will calculate the average

const half = ({max,min}) => (max + min) / 2.0;
1 Like
ES6 Destructuring- How does this code know to retrieve values from another object(stat)?
#11

my post referenced some code in someone else post that has been removed, do not worry

1 Like
#12

Thank you everybody! I am clear now