Use Destructuring Assignment... seems strange to me

[kinopotato]

Tell us what’s happening:
I have 2 questions
So this seems a bit strange to me, in the “lesson” part it says
var voxel = {x: 3.6, y: 7.4, z: 6.54 };
const { x, y, z } = voxel; // x = 3.6, y = 7.4, z = 6.54
const { x : a, y : b, z : c } = voxel // a = 3.6, b = 7.4, c = 6.54

BUT in the final solution, you are supposed to do this:
const {tomorrow: tempOfTomorrow} = avgTemperatures;

But in the syntax taught, it was supposed to be AVG_TEMPERATURES

so my first question is, what’s up with that
my second question is, if it’s supposed to be avgTemperatures then why does the function ask for AVG_TEMPERATURES??

Your code so far

const AVG_TEMPERATURES = {
  today: 77.5,
  tomorrow: 79
};

function getTempOfTmrw(avgTemperatures) {
  "use strict";
  // change code below this line
  const {tomorrow: tempOfTomorrow} = avgTemperatures; // change this line
  // change code above this line
  return tempOfTomorrow;
}

console.log(getTempOfTmrw(AVG_TEMPERATURES)); // should be 79

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-objects

[kinopotato]

ALSO
when I use this
const {tomorrow: tempOfTomorrow} = AVG_TEMPERATURES; // change this line
it still works AND I still use reassignment BUT it’s not accepted as a correct answer.

I can’t edit because I keep getting error 429

[DanCouper]

Im not quite sure what you mean re the lesson part - it is just an example of destructuring using a different object (in the example, a voxel, with x, y and z properties). It could have been anything -

const animal = { type: 'Cat', noise: 'mewl' }

const { type } = animal;
console.log(type) // 'Cat'

Which is the shorthand for

const { type: type } = animal;
console.log(type) // 'Cat'

Or you can give the variable a different name:

const { type: animalType } = animal;
console.log(animalType) // 'Cat'

---

The AVG_TEMPERATURES thing seems to be confusing a lot of people. It’s a test object, an example to run the function with to check it works. If you put that object as input into the function, you should get the results you expect.

It’s exactly the same as the code being:

function getTempOfTmrw(avgTemperatures) {
  "use strict";
  // change code below this line
  const {tomorrow: tempOfTomorrow} = avgTemperatures; // change this line
  // change code above this line
  return tempOfTomorrow;
} 

console.log(getTempOfTmrw({ today: 77.5, tomorrow: 79 })); // should be 79 

You don’t use AVG_TEMPERATURE in the function because then you’re just hardcoding specific values: it’ll fail the tests because then in th8s case you’re literally doing:

function getTempOfTmrw(avgTemperatures) {
  return 79;
}

Or if I delete the AVG_TEMPERATURES object, you’re doing:

function getTempOfTmrw(avgTemperatures) {
  return SOMETHING_THAT_DOESNT_EXIST;
}

[kinopotato]

@DanCouper

const animal = { type: ‘Cat’, noise: ‘mewl’ } const { type } = animal; console.log(type) // ‘Cat’

exactly? I mean if you did
const animal = { type: ‘Cat’, noise: ‘mewl’ }

const { type } = goingBananas;
console.log(type) // ‘Cat’

would it still work? Because in the exercise, the “=AVG-TEMPERATURES” was replaced by avg-temperatures. I can’t comment with the rest of what you said tho, it still takes a bit for code to sink in for me xD

[DanCouper]

goingBananas has to exist, so if goingBananas refers to an object with a type property it will work, otherwise it’s something that doesn’t exist so you’ll just get an error.

The shorthand for creating an object is this:

const example = { foo: 1, bar: 2}

Which you can use instead of

const example = new Object();
example.foo = 1;
example.bar = 2;

---

The shorthand for accessing an existing object’s properties, assigning them to variables so you can use them, is the reverse:

const { foo: a, bar: b } = example;

Which you can use instead of

const a = example.foo;
const b = example.bar;

The object example has to actually exist for you to access the properties

[DanCouper]

@kinopotato

would it still work? Because in the exercise, the “=AVG-TEMPERATURES” was replaced by avg-temperatures.

Ok, so tempOfTmrw is a function that accepts an object, and returns the value of the tomorrow object from that object.

For a simpler example:

const CHECK_THE_FUNC_WORKS = 2;

function multiply (x, y) {
  return x * CHECK_THE_FUNC_WORKS;
}

This works, by accident:

// Should return 4
console.log(multiply(2, CHECK_THE_FUNC_WORKS))

This doesn’t, it should return 10, but it still returns 4:

console.log(multiply(2, 5))

[kinopotato]

const AVG_TEMPERATURES = {
today: 77.5,
tomorrow: 79
};

function getTempOfTmrw(avgTemperatures) {
“use strict”;
// change code below this line
const {tomorrow: tempOfTomorrow} = avgTemperatures; // change this line
// change code above this line
return tempOfTomorrow;
}

console.log(getTempOfTmrw(AVG_TEMPERATURES)); // should be 79

So the logic behind console.log(getTempOfTmrw(AVG_TEMPERATURES)) is that AVG… was entered and when getTempOfTmrw read its values “tomorrow” came up and matched so 79 was returned??

[DanCouper]

Yes, AVG_TEMPERATURES is just an object with a property called tomorrow. It could be anything, it could be an object with a thousand properties, but as long as one of those is tomorrow the function will return the value of that property. All the function cares about is that you pass it an object that contains tomorrow.

Note that this means it’s dumb, it doesn’t do anything clever:

tempOfTmrw({tomorrow: 'Shrove Tuesday'})
// Returns 'Shrove Tuesday'

tempOfTmrw({today: 4, tomorrow: true, yesterday: 12})
// Returns true

[aditya_p]

See if this helps:
Hers is:
Answer i gave to someone with similar question.

[kinopotato]

How the hell do you learn all these stuff, or actually, what are these things called? What I mean is for example, how was it logical that if you put an object or array as a parameter that the function will go through all of that? What do you call that part of Javascript or programming? Because I think most of my problem is that I don’t know how this language errrr, acts? Behaves?

[kinopotato]

I’m very very slowly starting to understand this javascript thing. Maybe.

[vipatron]

Hey man, I wrote what I think is a good way to understand destructuring assignment in response to another post:

ES6: Use Destructuring Assignment to Assign Variables

Tl;dr: The “variable ‘start’” is never assigned, you’re misunderstanding what the quoted claim is saying. I had a fair amount of difficulty in understanding the destructuring assignment syntax. To help, I'd work on it at two levels, and refer you to the concept of "mapping" in mathematics (think back to algebra, when you mapped domains onto ranges): [image] No nesting syntax const { propertyMappingFrom: variableMappingOnto } = objectWhosePropertyIsOriginOfMappingArrow; Nesting Syntax co…

There is one ultimate source of truth on “what’s going on with Javascript,” especially ES6. It’s The ECMAScript 6 Standard - linked to section on Destructuring Assignment. All other guides are filtering and abstractions of that. My absolute favorite for Javascript is Mozilla Developer Network. MDN’s page on destructuring assignment. I live on MDN. I would suggest you do, to. The “Syntax” section saves me so much time when I am trying to use a function.

[kinopotato]

For some reason for me MDM definitions are somewhat too vague. I don’t know. I’m not blaming anyone though, I think I just don’t have the understanding so I’m reading other books THEN I plan to read MDM from the start as a sort of refresher and deep diving into the language.

[DanCouper]

@kinopotato

For some reason for me MDM definitions are somewhat too vague.

Yeah, this is completely normal - docs will seem vague at first - it’s the same for all languages. Until you’ve learnt the basics of how it works, it can seem very cryptic. However:

@kinopotato

I think I just don’t have the understanding so I’m reading other books THEN I plan to read MDN from the start as a sort of refresher and deep diving into the language.

This isn’t really a good approach. Start using it for reference now, and it will get easier as you understand the syntactic structures, how to make the language do stuff you want.

It’s not something you read from the start (also, “start” is arbitrary with respect to MDN - you can “start” literally anywhere) - what you are saying by that is akin to saying “I’m learning Chinese. I’ll start with some books on learning Chinese, then I’ll read a Chinese dictionary from the start.” Reading the dictionary is not really going to help with learning Chinese, because that’s not what a dictionary is for. Sure, it’ll improve your vocabulary a bit, but it won’t really help that much in learning the language because it’s just a huge list of words and what they mean. You’ll be a lot better at reading Chinese by the end of it, but it’ll be dreadfully tedious and you’ll only retain a tiny fraction of the information contained - it’s not a tutorial, it’s a reference.

MDN is a bit different in that it includes some [quite basic] tutorials, but the core of it (99% of what is contained) is a reference for the JS language, and for the web platform API (HTML, CSS & JS primarily).

[vipatron]

I agree with everything @DanCouper just said. In fact, i was about to write almost his exact post, but not as clearly. I loved that dictionary comment.

[kinopotato]

Alright, better to follow my seniors. I’m guessing MDM is the w3 of JS. It’s just weird that even though I didn’t understand a lot with HTML I could still get the definitions (most of the time) but when it came to JS, my mind just turned into butter.
Thanks for your advice though, I’ll follow it for sure!

[DanCouper]

HTML is just a way of annotating text so that an application (generally the browser) can easily parse it and so that it has meaning for both humans and machines -

<h1>Title</h1>
<p>Some text</p>
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
</ul>

rather than

Title Some text List item 1 List item 2

(which has no meaning to anyone who isn’t the person who wrote it)

So JS will be much harder, it will take a while I’m afraid

[kinopotato]

Well I’ll have you know, Afraid is my middle name! Thanks for the insights!

[eduardoltorres]

@DanCouper

You don’t use AVG_TEMPERATURE in the function because then you’re just hardcoding specific values

And this, ladies and gentlemen, was when reality hit me.

@DanCouper

The AVG_TEMPERATURES thing seems to be confusing a lot of people.

That’s true. I really don’t know why, but I kept trying to plug in AVG_TEMPERATURE when it is already plugged in by the “user” when they run the function with avgTemperatures as the argument of getTempOfTmrw( ). The confusion does not lie on destructuring, but in the basics or fundamentals of functions.

Thanks!!

[ILM]

It gave me the same issue… But I have to say I didn’t see the function being called at the end, and that confused me a lot
Or, better, I was confused by the topic at hand, and my confused brain didn’t notice the function being called