Introduction to Web Development Introduction to Web Development

Javascript Objects & Context Questions

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 Questions" 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:

Brian answers a number of questions from audience members about JavaScript objects. He talks a little about constructor functions and other advanced JavaScript techniques. Many of these advanced techniques are covered in the Frontend Masters Advanced JavaScript course.

Get Unlimited Access Now

Transcript from the "Javascript Objects & Context Questions" Lesson

>> [MUSIC]

>> Speaker 1: This may or may not be off topic, I'm not sure. But is there any connection to objects like this and records like saying redefining a person as Nina or Brian or myself and, or is it just person is very specific one set of variables in this case.

>> Brian Holt: Okay.
>> Speaker 1: And it could have been just named someone specific because it's not generalized. Does that make any sense?
>> Brian Holt: Yeah. I think so. We're kind of talking about strict schemas. We're talking kind of about inheritance. Cool, talking about that kind of stuff. That concepts doesn't really, should I keep going?

>> Speaker 3: Yeah.
>> Brian Holt: Okay.
>> Speaker 3: I'm just gonna make sure that this doesn't go to sleep.
>> Brian Holt: Okay, cool.
>> Speaker 3: But you can keep talking
>> Brian Holt: So in JavaScript there's no such thing as schema, at least not built in for language. So objects are kind of whatever you define them to be.

[00:01:09] That being said, you can actually create what are called constructor functions. There's such things like the new keyword. If [INAUDIBLE] those ring a bell then great. If not, then don't worry about them. Cuz they're not actually really used that much in JavaScript. People tend to just stick to what's called object literal syntax which is what I was showing you up here.

[00:01:27] With the two curly braces. Just because it is really short, simple, succinct. But if you are actually talking about one, two, and four. It's like every object must have a name. Every object must have an age. Or something like that. You essentially have to bring in another library to do it.

[00:01:42] Or you have to write what are called structured functions. Which is kinda like, I'm not gonna talk about them because I don't think that they are that useful. Did I address your question, or did I go in another direction?
>> Speaker 1: [LAUGH] Yeah. Just okay, so a person is a specific thing, and it's not like you have different people who all have that variable structure then.

>> Brian Holt: Exactly.
>> Speaker 1: Okay.
>> Brian Holt: It's a single instance of an object. It's not a general purpose object.
>> Speaker 1: Okay.
>> Brian Holt: Yeah, and if you wanted a general purpose type object, you would write like a constructor function that would return to something like that. Cool.
>> Speaker 3: From the chat, [COUGH] going back to this example.

[00:02:26] The question was, so it returns the first var it sees after the loop, many kinda clarify why does it pick favorite. You have two vars with global scope, what would happen?
>> Brian Holt: So if I head down here and say var favorite = I don't know, another car of some sort.

[00:02:48] So it's gonna take the last one. Right? It's gonna take the last time it was declared, right? It's kinda like var x = 5. And then var x = 7, right? Like, what is x right now? The answer is, first of all, this is a really bad practice right?

[00:03:07] Because you don't wanna declare your variables twice. Like cuz it's really confusing and you're like, what is this person actually intending to do? I don't know. So you would typically see that, and just say like, if you were trying to change the values. But the simple answer to that question is that it is going to take the last one that happened, the last thing that was run.

[00:03:25] Which I think kinda makes sense, right? It's kinda like math. Does that address the question?
>> Speaker 3: One second.
>> Brian Holt: Okay.
>> Brian Holt: So how do we feel about this. This is again, a contrived example. It's typically not going to be, that difficult. Do we wanna go one step further and kind of melt your mind real quick?

[00:04:05] All right let's do this.
>> Speaker 3: Somebody mentioned that this behaved differently in chrome in [INAUDIBLE]. Or are you talking about the example?
>> Speaker 3: Sorry, sorry.
>> Brian Holt: Okay. Cool. So what happens if I want func to get Nissan Leaf, right. Like I've ripped off this function, I still want it to call the correct one.

[00:04:35] There's a kind of fun little thing here, in JavaScript that's called bind. So I can say func.bind(person). This is kinda recent syntax here, so this is kind of new frontiers we're exploring here, kind of. Okay? Now what happens if we call func again.
>> Speaker 1: Are you typing?
>> Brian Holt: I am typing.

[00:05:03] No. That's all I typed. Is it? Func.bind. No. It's not there. I am typing. It's not updating.
>> Speaker 3: Maybe while they're doing that, there was a question that this differently in IE9? I don't know if you have a [INAUDIBLE] but Chrome would give the same results, in IE, it shows Nissan Leaf and then undefined.

>> Brian Holt: Interesting, IE9's an interesting beast. Without actually delving directly into it I'm not exactly sure what's happening there.
>> Speaker 3: Okay. Their JavaScript engine, that's weird. Okay.
>> Brian Holt: That's a good question.
>> Speaker 3: So the answer is, use Chrome. [LAUGH]
>> Brian Holt: [LAUGH] The answer is, I'm sorry if you have to support IE9, that's the real answer.

>> Speaker 4: You should be cool like me.
>> Brian Holt: And use Linux. That's the answer, everyone use Linux. Just kidding, cool.
>> Speaker 3: And another question what's the difference between bind call and apply?
>> Brian Holt: It's a good question, sorry call and apply are very similar and they have the only way they differ is, one takes an array of parameters to pass to the function.

[00:06:22] And one takes just like you just list all your parameters as if they were normal parameters. I get them mixed up, I don't remember which one is call which one is apply but one's one one's the other so it's pretty easy to figure out. Bind is a little bit different.

[00:06:40] Bind is actually, you take the function and you're permanently binding its context, which is, when this comes back up, I will definitely show you what that means. [COUGH] But essentially, you call bind once and then every time from there on out, it will always call with that context.

[00:06:55] Whereas call and apply both are like, a one time thing. So it only changes the context one time. So, and actually I'm gonna jump straight into talking about bind right now. So let's go back to our no smoking sign, because apparently I get stuck on analogies and I can't get off them.

>> Class: [LAUGH]
>> Brian Holt: [LAUGH] What was my analogy yesterday? I don't remember, it's okay. Tupperware. Yeah! You guys all remember. You're never gonna forget that. [COUGH] So, bind with talking about our no smoking sign, no smoking in this building, it's kind of like saying the no smoking sign is still in the middle of the field, right?

[00:07:35] But we've setup a neon sign that says. We're in the middle of field. We know we're in the middle of field, but it actually refers to that building way over there. Right? It's just kind of, you can still kind of mess around with it and pull it out, but it's just maybe a mail home to send your address on the sign, so everyone knows what this still refers to.

[00:07:56] So in this particular case, I said bind(person) which is the name of this object up here, right? So now this function even though it's ripped out of person still actually refers still to person. Or I mean you can even get a little bit more fancy and say var man = and then you say he has a favorite and it's like a BMW i7 or something like that.

[00:08:18] This is kind of a fun little thing. You can say, this refers to man. Okay? Hopefully that now runs.
>> Brian Holt: Whatever. It was just refreshing.
>> Brian Holt: I'm apparently having issues with this.
>> Speaker 1: Is it supposed to say BMW?
>> Brian Holt: It should say BMW.
>> Brian Holt: I'm not sure, but that's kind of the general idea that like, that it would say BMW i7.

[00:09:17] I don't know what happened there. Okay. Interesting.
>> Brian Holt: Person.getFave
>> Brian Holt: Not sure.
>> Speaker 6: How does it know that man is a person?
>> Brian Holt: So it doesn't and that's kind of the magic of it, is that you can take these functions, you can rip them out of other objects and apply them to that different objects.

[00:10:03] It's kind of achieving a level of versatility.
>> Speaker 3: I think on your func bind.
>> Brian Holt: Which line?
>> Speaker 3: Somebody's saying maybe you need parentheses, you have them, okay.
>> Speaker 6: So you're taking the getFave function on a person. You're binding it to the man object. Is that correct?

>> Brian Holt: Yeah.
>> Speaker 3: Yeah, but somebody mentioned that like func2 then you would need parentheses before you called .bind, is that?
>> Brian Holt: That might be it. So. Yep, that's it.
>> Brian Holt: Anyway.
>> Speaker 6: So don't use bind [LAUGH].
>> Brian Holt: Yeah no, I mean bind is really powerful, I'm just kind of struggling with, this is kind of a contrived example and I think I just kind of got messed up, so.

[00:11:09] Maybe we'll come back to this but find this use for setting contexts. That's disappointing, anyway. So let's go ahead and move on to.
>> Speaker 3: There's a lot of a bind in that next JavaScript course.
>> Brian Holt: Yeah.
>> Speaker 3: It's on site Frontend Masters.
>> Brian Holt: Yeah, take a look at Calsen's.

>> Speaker 3: And on a flat and all that stuff.
>> Brian Holt: Yeah.