This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.

Check out a free preview of the full Complete Intro to Web Development, v2 course:
The "Context" Lesson is part of the full, Complete Intro to Web Development, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Brian discusses the "this" keyword. As a program progresses through JavaScript code there exists a context of its location that can be referenced through the "this" keyword.

Get Free Access Now

Transcript from the "Context" Lesson

>> Brian Holt: Okay, so lets talk about Context. You're gonna find Context as a similar field to scope. They are different but you apply a lot of the same thinking. Okay, so I have this me object, it has a name, it has a location. And then it has a getAddress function associated with it.

[00:00:28] It would be really nice if this getAddress function could reference other pieces of data attached to my object, right? That would make sense, because I wanna be able to return to a well formatted address. So that's what the getAddress does, it does something that you could put like on a post label.

[00:00:47] So the way that you do that is you use something called this. And this refers to whatever object it's on. So when I use this instead of getAddress, it refers to me, right? Because that's what it's on. If I had a function inside a location. I could even do like I don't know getCityAndState function.

>> Brian Holt: And I return.
>> Brian Holt:,
>> Brian Holt: And comma.
>> Brian Holt: This.state.
>> Brian Holt: Right, cuz what's this doing? This refers to, so this, this, [LAUGH] this, this refers to location. Cuz that function is on the location object here, so it refers to not the whole object. It refers to just the location object.

[00:02:04] The general rule of thumb, which this is an imperfect rule, is it's the closest object, right? Or the nearest object that it's within. So that's what this refers to. Now, that's not always true.
>> Brian Holt: I will invite you to take Kyle Simpson's courses. He explains this really well for Frontend Masters.

[00:02:30] He also has a book series called You Don't Know JavaScript, and it goes into that really well. It's free on GitHub, or you can buy it from O'Reilly. And he really gets deep into this. Context in JavaScript, it's a deep rabbit hole. It's a really deep rabbit hole.

[00:02:47] But suffice to say, in this particular thing, your intuition here is going to be correct, that this refers to me up here.
>> Brian Holt: We follow so far?
>> Brian Holt: Okay.
>> Brian Holt: So what happens if I refer to this outside of an object, right? So right here, on line 1 where I just refer to this, it's not inside of an object.

[00:03:13] Well, JavaScript executes in what's called a global scope, right? If you're in a browser, the name of that is window. That's just what it happens to be called, it refers to the entire window. If I'm in here and I say window, right? Window is the entire window that I'm inside of, it's the global context.

[00:03:37] If I do this, notice that it's the same. In fact, I can say this === window, and it's gonna say true,
>> Brian Holt: Okay, so the global context in this particular case is window. We're gonna get into Node at the end of the course today in a couple hours.

[00:03:59] And in that case it's not called window, it's called global. But it depends on where you're running, and everything we've done so far has so far been inside of a browser. So window has been the global context this entire time. So window has like a bunch of stuff on it for you.

[00:04:20] It has more of these kind of quote unquote built-ins. So for example, it has this scrollY. When you're scrolling up and down on a browser, it has your scroll position, and you can actually ask the window for that. So this execute as soon as I open the page, so when I first open the page it's a 0, 0.

[00:04:40] If I change this right now it's going to rerun the code, and this is gonna be a different number, it's gonna be how far down the page I am. So if I hit delete notice that a lot further down the page now. Now, if I change this right now it still says that because I haven't scrolled any.

[00:04:57] If I scroll a little bit more and I change it again, it's gonna be a different number, right? So it's my scroll position on the page, that's how many pixels I'm down on the page. There's also scrollX as well, as you might imagine, and that's how far I've been scrolling side to side.

[00:05:13] If you notice, I actually have disallowed you from scrolling side to side, so that's why it's always going to be 0. But if I didn't disallow that, it would also tell you where you're scroll is on the x-axis as well.
>> Brian Holt: Make sense? So there's a bunch of stuff like this.

[00:05:29] If you come in here again, if you say window., you can see here it's got a ton of stuff on it, a ton.
>> Brian Holt: Okay, I don't even know what a fifth of those are. So you don't have to know what they are. Context is hard, and it gets harder, because when Context breaks down, it's really not obvious.

>> Brian Holt: So the deeper rule of thumb is that it matters where a function's called. And in what context a function is called. And how a function's called. So there's a bunch of ways you can fiddle with,
>> Brian Holt: Context, and it's subtle and insidious. And so, my advice to you is as much as possible do not rely on this and in context.

[00:06:26] Rather, pass those things in as variables, right? So what I could have done here for this getAddress? I could have made getAddress a function that you passed in an object to that read things off of the object, right? So I would've pulled getAddress totally off as its own function that took in some sort of like person, right?

[00:06:51] And then it returned this for that person, right? This is when we get far better design pattern than just putting a getAddress function on the person. Personal opinion, but I also, it's right so just do that. [LAUGH] Just kidding. [LAUGH] Cool, does that make sense? It's just a better programming practice for JavaScript, because this is really easy to mess up.