This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.

Check out a free preview of the full JavaScript: From Fundamentals to Functional JS course:
The "Nesting Objects" Lesson is part of the full, JavaScript: From Fundamentals to Functional JS course featured in this preview video. Here's what you'd learn in this lesson:

Sometimes properties within an object may be an object rather than a string or number. In other words, an object inside of an object. Bianca explains why you may do this and walks through the syntax.

Get Unlimited Access Now

Transcript from the "Nesting Objects" Lesson

>> [MUSIC]

>> Bianca Gandolfo: So, we kind of play with this a little bit, but I wanna talk more in depth about dealing with nested data structures and how to access them, and how to think about them in a way that makes it easier. You're gonna deal a lot with nested data structures, usually in the form of JSON.

[00:00:21] Which is how you're probably gonna get your data for your back end or your API. So here's just an example of how you get started. So we start with a box, our box that we've learned to love over the day, and in the box, we can have an inner box.

[00:00:37] An inner box is a property inbox that contains a value which is also an object. And so, this is a nested object.
>> Bianca Gandolfo: And the rules are the same here. So we can also use bracket notation if we wanted to, and our results are the same. And then if we wanted to add a property to that innerBox, simply what we do is we continue the pattern.

[00:01:09] So first we access box, right. So we access the whole box, right, which would be this whole object and then we access the property value, right? So box('innerBox') is going to evaluate to a value which is the value at that property which happens to be an entire object.

[00:01:37] And then from there It's creating a property full, and it's assigning it the value true, and that's where we get that value.
>> Bianca Gandolfo: Does that make sense? Thumbs on that? Sideways. Do you have a question about it?
>> Speaker 2: What are we doing? You're dusting what?
>> Bianca Gandolfo: We're putting an object inside of our object.

>> Speaker 2: How about why? Why?
>> Bianca Gandolfo: Just like, you're going to be dealing with nested data structures a lot. And you're gonna be creating them, moving them around, getting data out of them, organizing that data in a way that's meaningful for your application.
>> Speaker 2: So that's similar to having an array of objects though?

>> Bianca Gandolfo: Yep, so you can have an array of objects, you can have an object with an array that contains more objects. And you're gonna find that, you're gonna have these super nested data structures that you're gonna get from your API, and then you're gonna have to turn that into DOM and make it a user interface.

[00:02:48] But first you need to learn how to deal with a nested data structure before you can even get there.
>> Speaker 3: Is there on a lot of the more complex. Let's say, nested structures. Is there any way to, because I see a wall of text.
>> Bianca Gandolfo: Mm-hm.
>> Speaker 3: That's what JSON.

>> Bianca Gandolfo: Mm-hm.
>> Speaker 3: Is there a way to run something to see what that structure is? Without the values in it. Typically it's a bunch of v's or is that?
>> Bianca Gandolfo: Right, so if you're getting it from an API, hopefully the documentation might have some information on that. If you have an end point for the API, or you're receiving the data.

[00:03:28] You could actually just directly go to that URL, and it will print out the data for you directly. Then there is Chrome extensions that sort of pre-defy it to indent it and stuff.
>> Speaker 3: Okay so the pre defy of it.
>> Bianca Gandolfo: Yeah.
>> Speaker 3: But it's like a tree like structure.

>> Bianca Gandolfo: Yeah, and so you can look at it.
>> Speaker 3: Okay. Thanks.
>> Bianca Gandolfo: Yeah, great question though. Cool. So, and again the rules don't change, you're going to also use dot notation right after using bracket notation, it's still the same. So, what is this gonna be? What is this gonna look like?

[00:04:05] box.innerbox?
>> Speaker 2: Squiggly line, full, pull and true?
>> Bianca Gandolfo: Does everyone agree? Thumbs on the answer. Feel like its been a long day and we're starting to fall asleep. We're almost there, almost there. So close. Awesome. So what if we assigned box myInnerBox to a variable? What does this look like?

>> Speaker 3: Same then?
>> Bianca Gandolfo: Yeah. Absolutely, it's gonna be the same. Oops.
>> Bianca Gandolfo: Full = true.
>> Bianca Gandolfo: So, what about here? What if we triply nest our object? And now we have a box, we have an inner box, and then we have the baby box. We have a little box family.

[00:05:18] So then we're just going to console log this line here. What is that gonna look like? What is it gonna look like?
>> Speaker 3: Empty object?
>> Bianca Gandolfo: Yeah. It's just gonna be an empty object.
>> Speaker 2: But it wouldn't have three squigglies on the left and three squigglies on the right?

[00:05:35] That it's just.
>> Bianca Gandolfo: No, it's just one object.
>> Speaker 3: Just one?
>> Bianca Gandolfo: Mm-hm.
>> Speaker 2: Okay. Got it.
>> Bianca Gandolfo: Cuz a way to think about it, again, is we first access box, right? Which is this, this whole object. And then we say box.innerBox, right, which is, here's innerBox. So the value stored there is this one.

>> Bianca Gandolfo: And then we say babyBox. And so, the value stored at babyBox, is this object. This is before we add the property, so it would empty at that point. So it would be an empty object. And then if we do it afterwards. Whoops. What is it gonna look like now?

>> Speaker 2: It's up?
>> Bianca Gandolfo: Yep.
>> Bianca Gandolfo: It's kind of cool.
>> Bianca Gandolfo: So the interesting thing about, I'm going to delete this last line. So the interesting thing also about objects is that If we say var bb, which is gonna be baby box, equals that. So here, we're gonna assign this empty object to the variable bb.

[00:07:25] Then when we add a property to our baby box and we check BB, every time I do a question mark it does that. What is that going to log there?
>> Bianca Gandolfo: It's okay if you're wrong.
>> Speaker 3: Blank, empty string.
>> Bianca Gandolfo: Empty string?
>> Speaker 3: Empty parenthesis, curly.
>> Bianca Gandolfo: Good guess.

[00:08:05] And that would be true, it would be an empty object, if it was a string. So if we did this, and it wasn't a string and it wasn't actually an object, it wouldn't change. However, because of something we call being passed around by reference, bb now is going to actually be referencing the same objects.

[00:08:35] So, if you add properties to this object, It's going to show up later. And this is true for objects that raise n functions. This is not true for primitive values, like numbers, boolean values, strings Null, undefined, things like that. Just objects raised and functions. Anything that's an object.

[00:09:09] And so that's something to keep in mind when things start to change a little weird, and things start to change when you're not expecting it to, and it's an object, you may want to check on this.