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

Brian discusses the 'this' keyword and how to determine the value of 'this' with the concept of context. There is no constant value of 'this,' which is determined by how a function is called. A student's question regarding classes in JavaScript is also covered in this segment.

Get Free Access Now

Transcript from the "Context" Lesson

>> Wouldn't it be nice if you had this big object here of me, right, that has my name, and location, like a street address. I definitely do live on 500 Fakestreet in Seattle. If I could make a function on there that would nicely print out the shipping address, right?

[00:00:22] So that's what this get address action will do for us, right? Let's actually make this just a tiny bit clearer. So first name, last name, right, street number, street, city, state, zipCode, and country. This is obviously very US centric, but it's what I know. [LAUGH] I don't send too many letters to Thailand, for example.

[00:00:59] So let's talk a second about, I have this object, me, right? And I'm trying to write a function that pulls out information that exists on the object that it was created on, right? So I have this getAddress function, so that I can call me.getAddress here, right? How do I refer to other parts of the object of the object that I'm on.

[00:01:23] This, that's what this is right here. So I say, right? This refers to me, right? So it would be like saying, if I'm doing, it would be like the same thing of here is doing, right? So that's what this does, is it refers to the object that you're on at the moment.

[00:01:51] This is called context, right? In this case, it's relatively straightforward that comes from the same object that it's on. But I will tell you that it's very easy to muddy the waters here. [LAUGH] I don't really wanna get into the crazy depth of how bent out of shape you can make this, but yeah, this is good.

[00:02:19] Yeah, question.
>> Yeah, are these classes that you're creating, and then calling whenever you see the dots and the colons?
>> The dots and the colons. Okay, so-.
>> If you're making a class, I don't know.
>> You're on the right track for sure. We're in the same realm of information.

[00:02:44] So class is a really loaded word and it depends on which language you're talking about. I'm assuming it's more like a Java context that you're talking about, what class is with, but it can apply-
>> I think JavaScript has classes.
>> It does, so you can do it

>> Maybe I am thinking about Java, okay.
>> No, it's totally okay, and we'll demystify it a little bit, cuz I'm sure someone else is wondering the same thing, it's a good question. I don't really wanna get too much into classes, but you can say class Car, right?

[00:03:13] And it can have a go function, right? You're creating a type of object, it's like a blueprint for an object. And so if I wanted a car, I would have to say const, I don't know, civic = new Car like this. And you have to use this new thing here to get the actual civic.

[00:03:32] This would be now an object that has a go function on it.
>> Okay, got it, I think yeah, understand.
>> So the civic that you would get would end up being an object just like this one, right? This one, we're just directly creating an object without creating a class in between it.

>> Okay.
>> Yeah, if all this was gibberish to you, then I just said go on and ignore it, because JavaScript is not programmed like you program Java and some of those other more, they're called object-oriented programming models. You can, and I'm imploring you to not. It's not a good way to write JavaScript, unless that there's anything wrong with doing that in Java or anything like that.

[00:04:11] It's just JavaScript is not built for object-oriented programming the way that Java is. So very similar to a class, it's just an instance of a class or it's just an object. Okay, back to this. Yeah, you can really bend this out of shape. It becomes important of where you call.

[00:04:36] So here, I say me.getAddress. So I'm calling it off of me, which means that this here ends up being correct, right? So you end up seeing here, I get the correct address out here at the end. I just wanna show you how this can break. If I say const func, let's just call it, what do I call here, getAddress, pulledOutGetAddress = me.getAddress.

[00:05:09] So what I've done is I now have this function here that I pulled out of it, right? I pulled it out of the me function here, right? And now, I think if I call console.log(pulledOutGetAddress) and I invoke that, undefined, undefined, undefined, undefined, undefined, undefined, right? It's not bound to this me, right?

[00:05:41] So when you call this here, it doesn't know what you're looking for, right? So it matters how you call the function, Super weird. I don't really expect you to remember this or know it, but I want you to know that there are dangers with this. Again, there's entire courses on the topic, definitely check out the JavaScript Learning Path in Frontend Masters.

[00:06:02] This will get into a lot of depth of what context can be. And they love to ask junior developers these questions when they do job interviews. So it's worth your time to invest to figuring out how contexts works in a bunch of different lights. I could spend the next two hours explaining to you ways to bend this and break this.

[00:06:19] I don't think that's beneficial to you right now in your journey. So I just want you to know it's out there, it exists, it can break, but just know that it matters how you call it. Yeah, I'm gonna hand wave away the rest of this conversation, cuz I don't think it's useful for us to get into a lot of depth here.

[00:06:43] Because it's either we go way deep in this and spend another hour on it or we keep going and just accept that this is complicated. Is that okay? I don't think it's useful to go any deeper than that.
>> But you don't change the me.getAddress to this,getAddress? Can it work then?

[00:07:03] Isn't that still calling me?
>> If I say down-
>> Or where you have the pulledOutGetAdress where it says me, if you just do this.
>> So good question. What is this here? What does this refer to?
>> It's outside of the bracket.
>> Yeah, so question mark, all right?

[00:07:23] It's probably a window, I'm gonna guess. ,yeah, we can get rid of this. Object window, What is window? Window is the overarching context that everything runs in. So you can say, So for example, when you call Math like this, it's actually technically calling window.Math. So all those unprefixed, globally available objects are technically on window, it's just implied when you don't put it there.

[00:08:14] So that's what this is, right? If I say this here, it's window.
>> Okay.
>> So that's why it's called context, super contextual about what you call this. And it's important that you know that it's out there what this is, cuz it's everywhere. You're definitely gonna see it in lots and lots of places.

[00:08:31] But you need to be super careful about what this is. So anytime that you see this, I want you to stare at it as, okay, what is this right now? And it's, well, I mean, I made a really good point here. This is running the same code twice, but this is different.

[00:08:53] And it's the exact same code, but where it's called makes this different, which is weird, right? It's, It just matters of where it's called. Yeah, cool, we'll leave it at that. You can actually fix this, so it actually pulled out, it would work. I hesitate to show you, but let's do it, .bind(me).

[00:09:25] And this would have to be me. Because I call this .bind, which is a function built onto functions, which I understand sounds a little strange, but functions have built-ins as well, right? By calling .bind on this, I am now grafting these two together permanently, right? So now, whenever you call pulledOutGetAdress, you're saying this is always going to refer to the me object.

[00:09:54] And now, it works, continually, it's fine. That's what this bind thing does. There's other ways to fix it, but we'll leave it at that. That's fine, that works for now. But yeah, that's what bind is for, bind is for changing the context of something, if you wanna change what me is.

[00:10:25] If you had something else where you had a different object, You could actually use bind to mess with what this is. At this point, you're in some sort of meta level programming that I don't, you're in a special kinda hell that I do not suggest you get yourself into, right?

[00:10:41] For the most part, it's just gonna be avoided by just not relying on this and particularly on the changing context of what this can be. This goes back to don't write too clever of code. Just because you can doesn't mean you should. Okay, questions about that? Does that make sense?

[00:11:05] I've kinda drawn a circle around this context black box that if you wanna peek into Pandora's box, again, check out Frondend Masters courses. I imagine it's probably one of Kyle Simpson's courses that deals with context and depth. So definitely check that out. You'll get on it if you're on the JavaScript learning path.

[00:11:30] And again, if you're trying to go out and interview for junior developer jobs, just definitely one more studying, because they love to ask that question. They'll do something like, What is this log right here? They won't show you the results, they'll just show you the code here. And what will you see if you do this?

[00:11:53] And you have to say, well, it'll be a bunch of undefined. So they're like, okay, how would you fix it, blah, blah, blah, all sorts of stuff like that. Okay, So this goes into what we were talking about earlier. What is this outside of anything? It's this thing called window.

[00:12:12] Window is kind of like this overarching context that everything executes in. If something doesn't have a context, its context is window. So for example, there's things onto window. We saw math, we saw console, console's built under window as well. So when I say console.log, right, you're actually saying window.console.log, right?

[00:12:39] Or there's scrollY. So right now, all these code snippets execute immediately when you load the page. So if I change this, this will actually be what my scroll position is on the page, how far I scrolled down in the y direction. So if I scroll up and change it again, notice that it changes, or if I scroll down again, again, up.

[00:13:05] But if I don't scroll, it just ends up being the same, right? There's lots of things on the window. There's also scrollX in my direction, but as you probably imagine, I'm not scrolled in any direction, because of this page just let you scroll side to side. You can also do totally, I'm pretty sure, scrollY like this.

[00:13:33] So all of these three things are exactly the same Question about window? Only applies in the browser, by the way. If you ever start working in Node-js, which is JavaScript on the back end, whole course on that from Scott Moss from Frontend Masters, window doesn't exist. For most of you taking this course, you are focusing on frontend development, right, which means that you'll always have a window available, right?

[00:14:02] But something to keep in the back of your mind. So yeah, this is a good thing for you to kinda keep in mind. A generally mostly applicable rule of thumb of what this is going to be is if you're inside of an object of some sort, this will be the object that you're inside of.

[00:14:25] If you're not inside of an object of any sort, generally a good rule of thumb is that if you're inside of an object, and if you're working on some sort of object, this will be the object that you're working on. So a good example is the me object up here.

[00:14:38] This is gonna generally refer to the object that I'm working on, which will be the me object at this moment, right? So that's one thing. If you're working outside of that, probably going to be window. Where it gets really dicey is where you're invoking functions that you've pulled out of other objects or things like that.

[00:15:02] That can make the context change kind of unexpectedly, would be a good way of putting that. Makes sense? Cool, I think I've given you enough context for you to be aware of what this is. For the most part, you don't really need to use it too much. But I do wanna introduce it to you cuz you'll see it in code samples.

[00:15:26] Or if you start writing things like react, which is like a framework for JavaScript, it'll use this in places and you'll see it. So I just want you to be aware of what it is and how to learn more about it. And I left a link here to one of Kyle Simpson's courses, where he talks more in depth on it.