Check out a free preview of the full Data Structures and Algorithms in JavaScript course:
The "BST Review & Scoping Discussion" 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 spends a few minutes asking the audience about which parts of the BST insert and search procedures are the most confusing or difficult to grasp. While responding to some questions, she reviews the BST insertion process and explains the "this" keyword and the role scope plays in the process.

Get Unlimited Access Now

Transcript from the "BST Review & Scoping Discussion" Lesson

[00:00:00]
>> Bianca Gandolfo: So before we took the break, we went through the insertion procedure using our four-binary-search tree. Any questions about that? Can we get a chance to meditate on how we do that?
>> Bianca Gandolfo: Yeah, how we was there sort of an ha moment that happened? As we went through this, some of you said that you only got through some of the pseudocode and didn't get to the code part.

[00:00:34] Do you feel like you'd be able to take this to the next step, at this point? It's just a feeling, I'm not gonna ask you to prove it to me.
>> Speaker 2: Yes.
>> Bianca Gandolfo: Yeah? What do you think is the most confusing part of this algorithm for people who just saw it for the first time, hypothetically?

[00:00:56]
>> Speaker 2: Calling insert(value) on this,left, I just missed that part. I knew it was supposed to be recursive, but I couldn't figure out where to put the recursive part.
>> Bianca Gandolfo: Yeah, so you knew it was recursive but you didn't know where.
>> Speaker 2: Yeah.
>> Bianca Gandolfo: Why did you know it was recursive?

[00:01:10]
>> Speaker 2: Well, cuz I knew I had to keep like, coming back and looking again.
>> Bianca Gandolfo: Yeah, so that like going deeper into the data structure, to you is like okay, that's recursion.
>> Speaker 2: But I wasn't sure how to get back without referencing something, but that makes sense.
>> Bianca Gandolfo: Yeah, cool, got it.

[00:01:28] So the recursive and then how do we even get to that part, right? Like how do you get to current's left, so that in the next recursive call it's the child? And that's when we did this.left.insert, and we talked about, excuse me, we talked about how-
>> Bianca Gandolfo: The key word this is defined at call time.

[00:01:56] And whatever this evaluates to is gonna be the node that is gonna be referenced in this, inside of this call. Can someone re-explain to me what I just said in there own words, or in my words, if it's easier?
>> Bianca Gandolfo: If you can remember them. Can binary search your memory for what I just said.

[00:02:39]
>> Bianca Gandolfo: Or, the other option is you can ask a question about a part that you don't understand.
>> Speaker 2: What did you just say?
>> Bianca Gandolfo: [LAUGH]
>> Speaker 2: That was my question.
>> Bianca Gandolfo: Yeah, so I was just saying. So how do we get to the next recursion call, where the current is the next child?

[00:03:00] How do we do that? How do we know that we did that?
>> Speaker 2: How do we know that we did that?
>> Bianca Gandolfo: Yeah, how do we know that we did that? And this.left is now the left of 7 and not 11.
>> Bianca Gandolfo: And how does it all work together?

[00:03:19]
>> Speaker 2: Well you're passing the value again to the same method.
>> Bianca Gandolfo: Mm-hm, but what's the value?
>> Bianca Gandolfo: The value is five.
>> Speaker 2: Right up, there it is, yes.
>> Bianca Gandolfo: Mm-hm.
>> Bianca Gandolfo: So we're passing the 5, so we're good about that, cuz that's pretty clear when we call a function with a number.

[00:03:44] And there's a parameter, that parameter is gonna contain that value, yeah?
>> Speaker 2: Mm-hm.
>> Bianca Gandolfo: But something that's a little more difficult is when we have the keyword this inside of a function.
>> Bianca Gandolfo: And we want it to point to the child,
>> Bianca Gandolfo: Of 11, right?
>> Bianca Gandolfo: We did that, cuz we went through and it's working, it appears to be working, our pseudocode, right?

[00:04:11] We can't run it and test it, except for with our brains but it appears to work pretty well.
>> Bianca Gandolfo: But how do we know,
>> Bianca Gandolfo: That we went in another level?
>> Bianca Gandolfo: The first step would be like where do you suspect we're even doing that? We can start there.

[00:04:36]
>> Speaker 2: Where we call the method again?
>> Bianca Gandolfo: Yeah, so we suspect here on line four that this is where we are digging deeper, it's a couple things that suggest that. We have our recursive call, we know that with our recursion we're gonna be digging deeper into our data structure, right.

[00:04:57] And then, this.left seems useful because 11 is our current, right. 11 is this.
>> Bianca Gandolfo: Right, here's 11, and its left is 7. And that's where we want to go, right. So those pieces fit together, it seems right. This start left, great that's gonna be 7, we wanna insert 5.

[00:05:30]
>> Bianca Gandolfo: Yes?
>> Speaker 2: Yes.
>> Bianca Gandolfo: We jump in and that is how we get this next thing in the stack and we say 5 is less than current. And we want current to be 7, and we think it is. But my question is how do we know it is, or why do you know it is?

[00:05:53]
>> Speaker 2: What does the computer know it is?
>> Bianca Gandolfo: Yeah, we're running the code right now in our brain. But yeah, how does your execution context know, your browser, whatever environment it's running in.
>> Speaker 2: Cuz this changes to the next binary surety so when you call the insert of this dot left.

[00:06:20]
>> Bianca Gandolfo: Mm-hm.
>> Speaker 2: And you could think of it as your inside left, which is a new binary surety. And so the value that you had before is no longer in scope.
>> Bianca Gandolfo: Yeah, yeah, exactly. So it all has to do with this line here, where we said this.left, right?

[00:06:38] We had this rule where, when we call a function.
>> Bianca Gandolfo: Whatever to the left of that call is what this is inside of that call. Does that make sense, do you want me to say it one more time, or we got it? One more time? Or we got it?

[00:07:01] One more time? Okay, so, when we call a function that's when we define the keyword this. Without calling a function, keyword this means nothing to us, to anything to anybody, it's undefined. The soonest we call a function, we can give this value. And one way of doing that, is it will automatically assign the object to the left of that function.

[00:07:28] So this is the function, this is the object to the left, right? This dot left evaluates, right, so here's this, here's this dot left, evaluates this object 7. And that's the rule for, or one of the rules for the keyword this and how we define it. Another one that we used before, right, is when we used the keyword new.

[00:07:55] We did some magic around assigning values to this, right? Remember I was like, underneath the hood it's gonna create this empty object. And then it's gonna return this at the end, which is an object, right? So that's another way to find this just like instantiating a new object, and this is another way.

[00:08:13] Does anyone know any other ways to define this in the body of a function that they've used before?
>> Bianca Gandolfo: No?
>> Speaker 3: Sorry, could you say that again?
>> Bianca Gandolfo: What's another way that we can give this a value?
>> Speaker 3: We use new.
>> Bianca Gandolfo: Yeah, so we use new when we're constructing.

[00:08:39] We give this a value, we create this. And this example we're doing what I call left of the dot, is another way, so that's two ways. And I'm saying there's another way, has anyone tried anything? Yeah?
>> Speaker 3: I got an answer online from Oscar. This .left is the object invoking insert, so this equals this.left?

[00:09:04]
>> Bianca Gandolfo: Yep, that's totally true Oscar, wxactly. What's another way we can say what this is though? This is gonna help you in your JavaScript life.
>> [INAUDIBLE],
>> Bianca Gandolfo: Yeah, so before you call a function, what is this equal?
>> Speaker 2: [INAUDIBLE]
>> Bianca Gandolfo: Nothing.
>> Bianca Gandolfo: Does that make sense? This is like a pronoun, and you can put a value in there, it's usually an object, you wanna it to be an object.

[00:09:35]
>> Speaker 2: Is that the page outside of the function?
>> Bianca Gandolfo: The page?
>> Speaker 2: Yeah, is that, if you call this just in the global scope, isn't it?
>> Bianca Gandolfo: Yeah, if you just called this in the global scope, it's just gonna be window.
>> Speaker 2: Window?
>> Bianca Gandolfo: Yeah, it's gonna be kind of useless.

[00:09:51] So that's probably an error in the language, it's not useful. But yeah, that's one way, we could just call it and see what it's gonna look, and it's gonna be your window object
>> Bianca Gandolfo: So what I'm looking for is call or apply. Have you guys used call and apply?

[00:10:06]
>> Speaker 3: Yeah.
>> Bianca Gandolfo: Yeah, so call and apply is a function where you can assign a value of this. You can choose it, right? For this one, you have some choice, but it's a little constrained the keyword new, even more rules. Using call or apply, you can basically hijack any method and tell it specifically what you want this to equal.

[00:10:29] And so I encourage you to research that and that will help you when you're doing any sort of object oriented program. Or if you just don't wanna lose your contacts, cuz you might lose the contacts of this. That happens a lot, you'll see this exact stuff like that call and apply can help you with that.

[00:10:46] So anyway-
>> Speaker 3: Yeah, scoping in JavaScript is super tricky sometimes.
>> Bianca Gandolfo: Mm-hm, yep.
>> Speaker 2: Are you gonna show us an example of call and apply?
>> Bianca Gandolfo: Nope.
>> Speaker 2: Okay, I'll just do it.
>> Bianca Gandolfo: Yeah, well maybe if I have a second later. It's not the most important thing, it's just a little tidbit about.

[00:11:04] If you wanted to make sure you knew specifically what this was you could use call and apply.
>> Speaker 2: OK.
>> Speaker 3: So that's interesting, so you would pass this to call?
>> Bianca Gandolfo: You would pass whatever you want this to be.
>> Speaker 3: Right.
>> Bianca Gandolfo: Right, which is 7.
>> Speaker 3: Yep.

[00:11:20]
>> Bianca Gandolfo: Is a way. We don't need to do it because this works just fine for us, but that's just another way that you could do it. And you'll probably see it in some of our solutions.
>> Speaker 3: You've got a couple questions from online.
>> Bianca Gandolfo: Sure.
>> Speaker 3: One from Tim A, does bind do the same thing?

[00:11:38]
>> Bianca Gandolfo: Yeah, bind does something a little bit different. So call, apply, and bind are all methods on functions, right. So we have our array methods, push and pop, that go to arrays, call, apply, and bind go to functions. And the main difference between from bind versus call and apply, is bind is just going to return an uninvoked function.

[00:12:03] So the function has not been called, the function just has the keyword this bound to it. I guess maybe that's why they call it bind. And then call and apply will actually invoke the function. And all of this is covered in great detail in Advanced JavaScript on Frontend Masters, as well as.

[00:12:24]
>> Speaker 3: Mm-hm.
>> Speaker 2: I believe your fundamentals to functional java script course accompanied with as well.
>> Bianca Gandolfo: Yeah.
>> Speaker 2: And advanced GS fundamentals. So three or four courses all covered called bind.
>> Bianca Gandolfo: Yeah.
>> Speaker 2: On fronted master.
>> Bianca Gandolfo: It's a good one, it's also a common java script trivia question you'll get.

[00:12:41] If you're interviewing for java script positions people will ask you. How does call-in apply work? So it's worth looking into.
>> Bianca Gandolfo: In a scale of one to five, how comfortable are we about getting to seven from eleven using recursion? So like, on, I'm scared, alone in the dark.

[00:13:08] Three, maybe I have a flashlight somewhere in my pocket. Five, is I am the spotlight and I'm leading the way.
>> Speaker 2: [LAUGH]
>> Bianca Gandolfo: So I need a full participation.
>> Speaker 2: Four.
>> Bianca Gandolfo: Four? 4, 5, 4, what about you? 3, cool, do you have a question?
>> Speaker 4: Yeah, my question is about the insert.

[00:13:37]
>> Bianca Gandolfo: Mm-hm.
>> Speaker 4: So, is JavaScript tied in up on this insert function?
>> Bianca Gandolfo: Is JavaScript assigning this for us?
>> Speaker 4: And just inserting it at-
>> Bianca Gandolfo: Insert is, we're defining insert, that's us.
>> Speaker 4: How we have to define insert?
>> Bianca Gandolfo: Yeah, so that's what the pseudocode is. The pseudocode's actually the insert code.

[00:14:03] So this is the recursive call, yeah. Well, all right, so those of you who had a 4. What's that tinge of doubt? Is that like a confidence thing or is there a small gap that I can identify and bring to the table?
>> Speaker 3: I just kind of haven't actually implemented it yet.

[00:14:26]
>> Bianca Gandolfo: Yeah, okay. So maybe you get to the five, but you actually coded it out.
>> Speaker 3: Yeah, but actually I feel like I understand the implementation.
>> Bianca Gandolfo: Cool.
>> Speaker 3: Just haven't actually gone through the motion of making it work yet.
>> Bianca Gandolfo: Cool, no worries, all right.