This course has been updated into a 4 part series! We now recommend you take the A Practical Guide to Algorithms with JavaScript course.

Check out a free preview of the full Data Structures and Algorithms in JavaScript course:
The "Review: Trees Part 2" Lesson is part of the full, Data Structures and Algorithms in JavaScript course featured in this preview video. Here's what you'd learn in this lesson:

Bianca continues her review of Trees by diagramming the Tree structure she created in the first part.

Get Unlimited Access Now

Transcript from the "Review: Trees Part 2" Lesson

[00:00:00]
>> Bianca Gandolfo: Let's just take a tour of what this tree actually looks like.
>> Bianca Gandolfo: You guys see what I'm doing here? So we created a tree. We added three branches to the root. And now, from those branches, I'm gonna add some more children.
>> Bianca Gandolfo: And we're gonna walk through and we're gonna see what this actually looks like.

[00:00:43]
>> Bianca Gandolfo: Cool? So we looked at the linked list, and they hold a reference to the next.
>> Bianca Gandolfo: Let's check this out. So tree, we instantiate our new tree, which is an object that has this.value, right, which is 1. And it also has another property, this.children.
>> Bianca Gandolfo: Let's just remove the this, and it'll actually be object literal notation, right, which starts out as empty.

[00:01:15] So there's our tree, and we add a child, oops. When we add our child, it goes in here, right? The value is 2,
>> Bianca Gandolfo: children,
>> Bianca Gandolfo: Is another array.
>> Bianca Gandolfo: Okay, so now we add another child with the value 3, with the value tree, the value this many.

[00:01:55] Where does it go?
>> off screen male: Inside the empty array.
>> Bianca Gandolfo: Inside the empty array?
>> off screen male: branch2 is-
>> Bianca Gandolfo: It's outside, right, another new array?
>> off screen male: What is page two?
>> Bianca Gandolfo: I don't know, what does the code say? So the code says, addChild, we pass 3, so we're gonna create a new tree.

[00:02:18]
>> off screen male: It's a new branch, so yeah.
>> Bianca Gandolfo: So value was 3, and then children, right, it's gonna have its own children, yeah?
>> off screen male: Yeah.
>> Bianca Gandolfo: And then we're gonna say this.children.push[child]. So what is this?
>> off screen male: The original tree?
>> Bianca Gandolfo: The original tree, whatever's to the left of this dot.

[00:02:40] So the original tree, which is our first one, we're gonna push it. So it's gonna tack it on the end.
>> Bianca Gandolfo: So we put a comma there, and then we tack it.
>> off screen male: So it's making a new array with different elements
>> Bianca Gandolfo: It's the same array with an added, so this is the original array.

[00:03:03]
>> off screen male: Uh-huh.
>> Bianca Gandolfo: And then we're simply pushing to the next.
>> off screen male: It's adding a new element.
>> Bianca Gandolfo: Yes, yes, exactly, and then what about this one, 4?
>> off screen male: That added a new element.
>> Bianca Gandolfo: Yep, to the same array.
>> Bianca Gandolfo: I'm just gonna put some dot dot dots here, cuz we understand that now, right?

[00:03:35] Cool.
>> Bianca Gandolfo: What about this one? How does this affect our?
>> Bianca Gandolfo: I'm gonna put some dots there. So we say branch1.addChild(5).
>> Bianca Gandolfo: So let's hop in here, value is 5, so it'll look like this. And then we say this.children.push. The real question is, what is this?
>> off screen female: branch1.

[00:04:15]
>> Bianca Gandolfo: Yeah, this is branch1.
>> Bianca Gandolfo: And remember, branch1 is the one that has the value 2. And so this refers to this entire object, right? This is branch1, so .children dot push. So we're gonna push it there.
>> Bianca Gandolfo: This is getting really long. Let's do some indenting.
>> Bianca Gandolfo: Put that in there, etc.

[00:05:10]
>> Bianca Gandolfo: Cool.
>> Bianca Gandolfo: Do we see what's happening here? So branch1.addChild(6). Again, here is branch1. We're gonna push it to a child array.
>> Bianca Gandolfo: It has the value 6, okay? If I wanted to add,
>> Bianca Gandolfo: A node or tree here into this children array, how might I do that?

[00:06:06]
>> off screen male: Well, you could just add dot add child, whatever, to that line.
>> Bianca Gandolfo: To this one?
>> off screen male: Yeah.
>> Bianca Gandolfo: Mm-hm, so we can chain it.
>> Bianca Gandolfo: The reason we can chain it is because we're returning the child. If we do not return the child, we cannot chain. That's important.

[00:06:31]
>> Bianca Gandolfo: Cool, so now things are getting crazy. So this is our tree. So our tree is like a super nested collection of objects and arrays, right? It could be a bajillion deep.
>> Bianca Gandolfo: Cool, any questions about what this is really looking? It looks all nice, right, when we have our little constructor functions here and our methods.

[00:07:01] But then when we get down to it, it's a little messy.
>> off screen male: It's kind of like, is it a shell, kind of like that's growing inside?
>> Bianca Gandolfo: A shell that's growing inside, yeah, definitely. It's not growing outside, right? It's gonna keep growing from this root.
>> off screen male: Yeah.
>> Bianca Gandolfo: Right, from this root, it's gonna grow inside this children.

[00:07:25] It's gonna be nested in there somewhere.
>> Bianca Gandolfo: And then we could add this entire tree as a child to another tree. And we would just be putting it into their children array. Then it gets really crazy.
>> Bianca Gandolfo: Cool, but we know this is recursive because we see the same pattern over and over again.

[00:07:54] And when you think, nested data structure, same pattern, your mind should be thinking, this is a recursive algorithm, yeah? Cool, reflections on our tree?
>> off screen male: Well, I just had a quick question.
>> Bianca Gandolfo: Yeah.
>> off screen male: You said if you don't put return child, then you can't chain them.
>> Bianca Gandolfo: Mm-hm.

[00:08:23]
>> off screen male: So that does mean you'd have to say branch1 dot, or you would have to create a variable for the one that contains six, and then add it? Is that what you would have to do, or?
>> Bianca Gandolfo: Yeah, you'd have to somehow access, you'd have to save a reference to this node, right?

[00:08:42] And if you don't return it, that means you're gonna have to traverse through the data structure and find it.
>> off screen male: I see.
>> Bianca Gandolfo: Yeah.
>> off screen male: Okay.
>> Bianca Gandolfo: Unless you're saving it somewhere. You'd have to save it somewhere. So what that would look like is some recursive loop searching for the value 6.

[00:09:01] Yeah, okay, reflections?
>> Bianca Gandolfo: Tell me about trees. What's your favorite thing about a tree?
>> off screen male: They're leafy.
>> Bianca Gandolfo: What's that?
>> off screen male: They're leafy.
>> Bianca Gandolfo: They're leafy, leafy and green.
>> Bianca Gandolfo: What else, anything? Did you guys find that when you approach this data structure that you had the same blanking sensation from a linked list or a stack and queue?

[00:09:43]
>> off screen male: To me, it just makes much more sense, for some reason
>> Bianca Gandolfo: Yeah?
>> off screen male: Yeah.
>> Bianca Gandolfo: Cool, makes more sense.
>> off screen male: I think it's probably because most, I don't know, operating systems use the tree, right, with the folders.
>> Bianca Gandolfo: Yeah.
>> off screen male: Folder tree kinda things, so you're used to that structure, I guess, I don't know.

[00:10:02]
>> Bianca Gandolfo: Yeah, maybe, but I feel like stacks and queues are pretty common as well. Linked list, maybe a little less common that we recognize it, at least.
>> off screen male: Mm-hm.
>> Bianca Gandolfo: Yeah, yeah, and we use trees a lot for frontend, our frontend DOM.
>> off screen male: Mm-hm.
>> Bianca Gandolfo: Yeah.
>> off screen male: Your lists, linked lists, you said, or trees, what's more common use?

[00:10:26]
>> Bianca Gandolfo: What's more commonly used, a linked list or a tree?
>> off screen male: Yeah.
>> Bianca Gandolfo: I don't know. I think that trees, you'll be working, as a frontend engineer, you're gonna be working with trees a lot more than a linked list, for sure, in JavaScript. Yeah, I can say that.

[00:10:43]
>> off screen male: JSON.
>> Bianca Gandolfo: Yeah, mm-hm.
>> off screen male: Would be a good example.
>> Bianca Gandolfo: Yeah, doesn't this look a lot like JSON?
>> off screen male: Mm-hm.
>> Bianca Gandolfo: Some nested data structure. Yeah, absolutely. I like that connection.
>> Bianca Gandolfo: Cool?
>> Bianca Gandolfo: All right, so it makes more sense that a linked list, queue or stack.

[00:11:08] Very interesting. I have a theory that it makes more sense because perhaps you've seen the linked list. And now you have something to connect it to, so sort of scaffolding those ideas. That's my sense, but I could be wrong.
>> off screen male: Well, I didn't think about the DOM until you said it, but that might be part of it too.

[00:11:29]
>> Bianca Gandolfo: Yeah, yeah, yeah.
>> off screen male: Just used to that, so.
>> Bianca Gandolfo: Yeah.
>> off screen male: But, yeah.
>> Bianca Gandolfo: Traversing the DOM. Cool.