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

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

Objects are a collection of related properties. For example, a “car” object may have properties “make”, “model”, and “color”. Brian walks through an explanation of object syntax and also explores the “this” keyword.

Get Unlimited Access Now

Transcript from the "JavaScript Objects & Context" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Brian Holt: Let's get talking about JavaScript objects. Many of you, I'm sure are familiar with object oriented programming. I'm sure many of you are not. So we're just going to assume that you are not. So objects in JavaScript are like a collection of properties. That sounds kind of really technical and computer science.

[00:00:27] It's actually not very technical. So we'll look at it here in just a sec. But they can contain other numbers, other objects, other strings, functions, anything for like that. And they're useful for grouping like properties together. So let's take a look at this car, right? We have this var car, which is an object, right?

[00:00:48] You can kind of differentiate an object from anything else by the curly braces, right? So here the car has a make, a model, an acceleration and then I gave it a function called accelerate, which would just make it go even faster. It would increase that acceleration by ten.

[00:01:09] We can talk about this here, literally in the next slide so if this doesn't make sense to you we're about to talk about it so it's good. So it's kind of a simple pattern right? But just imagine trying if you were creating cars in your JavaScript right? That you have to keep track of 30 different cars and you have to keep the track of make one, make two, makes three as opposed you could just keep track of car1, car2 and then they would each have like their own set of properties.

[00:01:39] It's a really powerful practice because then you can start assuming things about the objects, right? We'll see that here in just a second. And I think Nina actually touched on it yesterday as well that if you have a person and a person has an name and a age, right?

[00:01:54] You can always assume that that person has that name and age. Yeah, so let's talk a little bit about this. So I'm sure all of you have this this sign around right like no smoking in this building or no parking next to this building, right? So what does this mean in this particular context, right?

[00:02:16] It means the building that it's next to. It makes sense next to a building. But what happens if I take that no smoking in this building and just stick it in the middle of a field? Just doesn't make any sense, right. What is this, what is this building.

[00:02:30] So this kind of contextual awareness of the word this applies also in programming. The word this refers to whatever I'm next to, whatever I'm in, right? So hopefully that makes sense on a high level, that's like concretely what that means. Yeah, this can be complicated particularly in JavaScript, so just be careful with it.

[00:02:56] That's all I'm gonna say about that. So, let's go ahead and open this.
>> Brian Holt: Maybe it will open. There we go.
>> Brian Holt: So let's make this a little bit bigger here since you don't really need to see that. So, here.
>> Speaker 2: Where was that? What slide was that on?

[00:03:24]
>> Brian Holt: That is on slide one of them, 124.
>> Speaker 2: Thank you.
>> Brian Holt: Okay, you're welcome. So we have a favorite. And then we also have this person here that has a favorite. Okay, so let's first talk about this one. If our person has a favorite car and it's a Nissan Leaf, and we have this function called get fave.

[00:03:53] Right, this says return this dot favorite. So in the context of this object, get fave is the object. Right, I think that kind of makes sense, right? This refers to essentially a person, right? Cuz it's being called within the context of the person, it's kind of like sticking the no smoking sign in this building on your object.

[00:04:15] It makes sense that this object is what this refers to okay? So we call it document.right person.getFave okay and we're calling that function off the object. Right here which is what these parenthesis means, right. Like it means that I'm calling that function. And so it's calling this function, it's returning this.favorite, okay.

[00:04:38] And this.favorite in this particular case refers to this.favorite right here, the Nissan Leaf, okay. Then I'm writing a new line just so, you know it's easier to read right there, okay? This is kind of a, some black magic, so bear with me for a second. Right here I'm saying func equals person.getFave without the parenthesis, okay?

[00:05:05] What does that mean? It means I'm actually not calling the function, I'm just ripping the function out of the object, right? All right, actually to be more succinct about it, I'm creating another reference to it. So both of these still exist, right? So this getFave exists and this func exists, but they essentially refer to the same thing.

[00:05:25] I mean it's kind of like, if I say var x equals five, and I say var y equals x, right? What is y right now? It's five, and what is x? Also five, okay? Same idea here, we're just doing it with a function. You can treat functions like variables in JavaScript, which is kind of mind blowing, but it's also extremely powerful.

[00:05:47] And if you want to explain why it's the most powerful pattern in the world, there's a front end masters course called Hard Core functional Programming, that's just mind blowing. My mind melted when I watched it. It was awesome.
>> Speaker 3: Launching next month.
>> Brian Holt: Launching next month.
>> Brian Holt: Cool, so that is exactly what's happening here.

[00:06:06] I've now ripped func out so now func right here refers to this getFave, okay? So that thus far should make sense, but now I'm running document.write, and I'm calling Func. So essentially now what I've done is I've ripped the no smoking in this building sign off the building and then I threw it in the middle of the field to see what happens, right.

[00:06:32] So now I'm doing document.write func. It's no longer in the context of this person, it's like a lost puppy. [LAUGH] So what does it do? There is a global object in JavaScript right, in the case of the browser which is most of what we deal with. It's the window, like the window the entire browser object.

[00:06:55] So I have up here var favorite, which is not in any particular context, it has no scope to it, it's just in the global object. So when I call document.write func, what's it actually looking for? It's looking for this favorite up here, right because it's now a no smoking this building sign and that's on the entire world and this favorite is the only one that i can see.

[00:07:21] Are we okay with that, how do we feel about that? Right, we got Nissan Leaf right here and we have Tesla Model S right here. That's the explanation, that's what context is. This is mostly to, this isn't actually a very useful pattern by the way, this is purely like an academic exercise.

[00:07:40] You don't actually wanna rip functions out and then typically you wanna know exactly what this refers to and you don't want this to be changing. So, yeah, it's powerful, it's cool, it's a little confusing.
>> Speaker 2: So, it's calling both models as a favorite.
>> Brian Holt: Mm-hm, so, I'm calling the function twice.

[00:08:03] Right here, person.get fav. That's, I'm calling it within this context of the person, therefore it's returning Nissan Leaf. I'm then calling it again in the context of the global object. And that is referring to this favorite up here. That's why it says Nissan Leaf first, which is this one.

[00:08:23] Right, and then it says Tesla Model S down after calling this one, which refers to this one.
>> Brian Holt: Now this is actually quite difficult JavaScript. There's actually many front end developers that won't grasp this. I will tell you that because it's one of our interview questions at Reddit, and a lot of people miss it.

[00:08:42]
>> Speaker 2: [LAUGH]
>> Brian Holt: So, this is really cool. I think it's really cool to learn it very early on because once you kinda grasp this, kind of the sky's the limit. There's really cool stuff you can do with ConTEXT.