Use Destructuring Assignment to Assign Variables from Nested Objects8571

Hello, I am on the Use Destructuring Assignment to Assign Variables from Nested Objects exercise and I really do not understand what is going on in regards to the examples given in the course material. First there is an ES5 object example given and then the course material gives an example as to “how to extract the values of object properties and assign them to variables with the same name”.

const user = {
  johnDoe: { 
    age: 34,                                                                                //   <----  ES5 Object Example
    email: 'johnDoe@freeCodeCamp.com'
  }
};

================================================================
ES6 example below to show “how to extract the values of object properties and assign them to variables with the same name”.

const { johnDoe: { age, email }} = user;

I guess what I am confused about is what exactly is the ES6 example code doing? What I mean is I put these examples in my editor and when I console.log(user) I then get the expected output of this: { johnDoe: { age: 34, email: ‘johnDoe@freeCodeCamp.com’ } } so then I try to console.log something from the ES6 example and I get nothing and its probably because Im not sure what it is even there for, so for example I tried console.log(johnDoe) and got an error. I hope my question makes sense and sorry if it does not I will try to explain better if someone does not understand what I am asking, Thanks or any help offered.

================================================================

Challenge: Use Destructuring Assignment to Assign Variables from Nested Objects

Link to the challenge:

Can you show the exact code you are trying and the exact result?

This worked fine for me in the console:

Screen Shot 2021-06-28 at 10.29.04 AM

1 Like

@manbodhclaude I edited your post to change some text formatting just to make it a bit easier to read.

2 Likes

Hi manbodhclaude,

It can take some time to wrap your head around destructuring.
In your case, you can’t access johnDoe. The property name is used to access age and email.
And why use this? Because you now have 2 variables age and email that you can access.
It’s much shorter to use age instead of using user.johnDoe.age every time you want to access the age 34.

HTH.

1 Like

It might help to think about nested destructuring in the context of using normal access notation, like dot notation, and when you have access to what.

const { johnDoe: { age } } = user;

const age = user.johnDoe.age;

In both cases, you have “dotted passed”, or gone a level deeper than the johnDoe property and do not have access to it.

It may also help if you are able to visualize the destructuring statement in reverse so the order “looks” like what the normal dot or bracket access would look like.

1 Like

@arturcarvalho, @KevinSmith, @lasjorg …Thank you to everyone that helped me out here, all of your feedback helped me understand this “simple” concept. So basically all I am doing is making it easier with less work to grab multiple values from object properties instead of using dot notation or bracket notation. And the reason it is easier is because I can grab multiple values on one line a code versus having to declare and initialize multiple values multiple times using dot notation/bracket notation, so for example…

const user = {
  johnDoe: {
    age: 34,
    email: "johnDoe@freeCodeCamp.com",
phoneNumber: "456-789-1234"
dob: "01/02/1940";
  },
};

const {
  johnDoe: { age, email, phoneNumber, dob },  //<-- Good because one line of code 
} = user;

const age = user.johnDoe.age;
const email = user.johnDoe.email;
const phoneNumber = user.johnDoe.phoneNumber;     // <--- more work not so cool
const dob = user.johnDoe.dob;

1 Like

Don’t be hard on yourself - this is hard stuff. If it were easy, FCC wouldn’t need to exist.

I think ES6 stuff is especially hard because you’ve already learned how to do things, and now here’s a completely different way…

So basically all I am doing is making it easier with less work to grab multiple values from object properties instead of using dot notation or bracket notation.

Yeah, a lot of ES6 is “I already have a way to do this but this is a little more slick”. There is nothing you can do with destructuring that you can’t do with ES5 notation, it just takes more lines.

But it’s confusing for learners because they are used to doing it the ES5 way and that makes sense to them and then this comes along and it seems very confusing and ultimately unnecessary.

My philosophy is that all things being equal, less code is better than more code. As long as it is still readable, it is good. But at first ES6 seems more difficult to read. But as you learn it better, it will actually become easier to read.

1 Like

@kevinSmith Very well said! and I’m still a novice but thanks for the kind words!! I hope I can start building my first apps and projects soon and I totally agree with you that less code = better code , so I see the proficiency in ES6.
-Cheers

Again, all things being equal. Sometimes I actually end up with a few extra lines of code because I think it increases readability or is more maintainable. But I do have a little voice in the back of my head always looking for ways to simplify things…

1 Like

I wouldn’t say it’s simple and also not more readable. What I see a lot is this:

const user = {
  johnDoe: {
    age: 34,
    email: "johnDoe@freeCodeCamp.com",
        phoneNumber: "456-789-1234",
        dob: "01/02/1940"
  },
};
const { age, email } = user.johnDoe
console.log(age) //34

So it’s a bit of a balance between both options. And as Kevin said, don’t be hard on yourself. Try to enjoy every time it works :slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.