Context

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

[00:00:22]
So that's what this getAddress function will do for us, all right? Let's actually make this a little just a tiny bit clearer. So first name, last name, all right? streetNumber, 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:58]
So let's talk Ia second about, I have this object, me, all right? And I'm trying to write a function that pulls out information that exists on the object that it was created on, all right? So I have this getAddress function so that I can call me.getAddress here, all right?

[00:01:17]
How do I refer to other parts of the object, of the object that I'm on? This. That's what this is right here. So I say this.name.first, all right? The this refers to me, all right? So it would be saying, if I'm doing this.name.first, It would be like the same thing of here as doing me.name.first, all right?

[00:01:44]
So that's what this does is it refers to the object that you're on at the moment. This is called context, all right? In this case, it's relatively straightforward that this.name comes from the same object that it's on, but I'll tell you that it's very easy to muddy the waters here.

[00:02:09]
[LAUGH] I don't really wanna get into the crazy depth of what how bent out of shape you can make this, but yeah, this is good, yeah. Question? Yeah, are these classes that you're creating and then calling whenever you see the dots and the colons? I guess The dots and the colons.

[00:02:30]
Okay, so- Are you making a class? I don't know. You are on the right track for sure. We're in the same realm of information. So class is a really loaded word, and it depends on which language you're talking about. I'm assuming it's more of a Java context that you're talking about classes with, but I could apply it.

[00:02:53]
I think JavaScript has classes. It does. You can do it. Maybe I am thinking about Java, okay? So no, totally, okay? 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, all right?

[00:03:13]
And it can have a go function, all right? You're creating a type of object. It's like a blueprint for an object. 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 a now an object that has a go function on it. Okay. Yeah. On it, I think, yeah, I understand. So this civic that you would get would end up being an object just like this one, all right? This one we're just directly creating an object without creating a class in between it.

[00:03:47]
Okay. Yeah, if all this was gibberish to that I just said go 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.

[00:04:07]
I'm not saying that there's anything wrong with doing that in Java or anything like that. 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 the class or it's just an object, okay?

[00:04:25]
Okay, back to this. Yeah, you can really bend this out of shape, it becomes important of where you call. So here, I say me.getAddress, so I'm calling it off of me, which means that this here ends up being correct, all right? So you end up seeing here, I get the correct address out here at the end.

[00:04:50]
I just wanna show you how this can break. If I say const func, let's just call it, what do I call it here? getAddress. PulledOut, getAddress = me.getAddress. So what I've done is I now have this function here that I pulled out of it, all right? I pulled it out of the me function here, all right?

[00:05:19]
And now I think if I call console.log(pulledOutGetAddress) and I invoke that. Undefined, undefined, undefined, undefined, undefined, undefined, all right? It's not bound to this me, all right? So when you call this here, it doesn't know what you're looking for, all right? So it matters how you call the function.

[00:05:50]
Super weird, I don't really expect you to remember this, but I want you to know that there are dangers with this. Again, there are entire courses on the topic. Definitely check out the JavaScript learning path in front of masters. This will get into a lot of depth of what context can be.

[00:06:05]
And they love to ask junior developers these questions when they do job interviews. So it's worth your time to invest in figuring out how context works in a bunch of different lights. I could spend the next two hours explain two ways to bend this and break this. I don't think that's beneficial to you right now in your journey.

[00:06:23]
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 because 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 get.Address, can it work then?

[00:07:04]
Isn't that still calling me? If I say, down here. Or where you have the pulled out, getAddress 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. It's probably window.

[00:07:25]
I'm gonna guess. Yeah. Yeah. 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. Match math. So all those unprefixed globally available objects are technically on window.

[00:08:10]
It's just implied when you don't put it there. So that's what this is, all right? If I say this here, it's window. Okay. So that's why it's called context. It's super contextual about where you call this. And it's important that you know that it's out there what this is because it's everywhere.

[00:08:29]
You're definitely gonna see it in lots and lots of places. 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 like, okay, what is this right now? Well, I mean, I made a really good point here.

[00:08:49]
This is running the same code twice, but this is different, and it's the exact same code, but where it's called makes this different, which is weird, all right? 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.

[00:09:15]
It would work. I hesitate to show you, but let's do it. .bind(me). 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, all right? By calling .bind on this, I am now grafting these two together permanently, all right?

[00:09:46]
So now whenever you call pulled out getAddress, you're saying this is always going to refer to the me object. 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.

[00:10:17]
But yeah, that's what bind is for. Bind is for changing the context of something. If you want to change what me is. If you had something else where you had a different object, you could absolutely use bind to mess with what this is. At this point, you're in some meta-level programming that I don't see.

[00:10:37]
You're in a special hell that I do not suggest you get yourself into, all right? For the most part, this can 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.

[00:10:55]
Just because you can, doesn't mean you should. Okay, questions about that? Does that make sense? I've drawn a circle around this context black box that if you wanna peek into Pandora's box, again, check out front of masters courses. I imagine it's probably one of Kyle Simpson's courses that deals with context and depth.

[00:11:22]
So definitely check that out. You'll get on if you're on the JavaScript learning path. And again, if you're trying to go out and interview for junior developer jobs, it's definitely one more study because they love to ask that question. They'll do something like. What is this log right here?

[00:11:49]
And they won't show you the results, they'll just show you the code here and what will you see if you do this? And you'll have to say, well, it'll be a bunch of undefined. So, okay, how would you fix it? Blah, blah, all stuff like that, okay? So this goes into what we were talking about earlier.

[00:12:07]
What is this outside of anything? It's this thing called window. Window is 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 is built on the window as well.

[00:12:30]
So when I say, console.log, all right? You're actually saying window.console.log, all right? 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've scrolled down in the Y direction.

[00:12:59]
So if I scroll up and change it again. Notice that it changes. Or if I scroll down again, up. But if I don't scroll, it just ends up being the same, all right? There's lots of things on the window. There's also scrollX, see my direction. But as you probably imagine, I'm not scrolled in any direction because this page doesn't let you scroll side to side.

[00:13:28]
You could also do totally. I'm pretty sure. (scrolly) like this, 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 front end masters.

[00:13:54]
Window doesn't exist. For most of you taking this course, you are focusing on front end development, all right? Which means that you'll always have window available, allright? But something to keep in the back of your mind. Generally, a good rule of thumb is that if you're inside of an object and you're working on some sort of object, this will be the object that you're working on.

[00:14:13]
So a good example is like the me object up here. This is gonna generally refer to the object that I'm working on, which will be the me object at this moment, all 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:14:40]
That Make the context change 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 want to introduce it to because you'll see it in code samples.

[00:15:04]
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's Simpsons courses, where he talks more in depth on it.