The full video and many others like it are all available as part of our Frontend Masters subscription.

Kyle Simpson

Kyle Simpson is an Open Web Evangelist from Austin, TX, who's passionate about all things JavaScript. He's an author, workshop trainer, tech speaker, and OSS contributor/leader.

Kyle Simpson

You Don't Know JS

Recently, Kyle tasked himself with finding clarification to the behavior of the "this" keyword. Kyle uses this example to demonstrate how to read and use the JavaScript specification.

Get Unlimited Access Now

Kyle Simpson: How many of you have ever opened up and read any part of the JavaScript spec?
Kyle Simpson: Maybe we'll get a couple of people from the chat room saying that they have, but my guess is I didn't see any hands go up. I read it every night before bed.

It's great nighttime reading right before I go to sleep. I'm kidding. But actually becoming a lot more familiar with the spec lately from writing these books because when I say something about JavaScript I gotta make sure that I'm actually saying it accurately. So just real quickly what I'm going to do if this link will work for me, I just want to take you real briefly through an experience that I just did a couple of days ago.

I had a comment thread that I started, I'd read an article that somebody had written. Great article, fantastic smart guy from a company called Teller. But I was reading this article and he made a statement something about the way that the this keyword gets bound. And stuck out at me as feeling a bit inaccurate or at least it's possible that I was misunderstanding.

But it felt a bit inaccurate, so I kind of started a comment thread and said you know I'm not really sure that's how it works, seems like a misconception and let's discuss it. And we kind of went back and forth a couple of times to clarify that he really felt this one way, and primarily he felt this one way because of a quote that he got from John Rezig's great book, Secrets of the Java Script Ninja, which stated something about the way that this keyword was bound.

And it should come as no surprise for any of you that know that I'm sort of a controversial person I happen to disagree with John on that particular topic. I think the way that's being stated is not quite correct, and so I have in my book, the second title of this series, explained my explanation for how this keyword gets bound and it kind of, in one point at least, kind of contradicted that.

And the question was sort of put to me, well the spec says this, are you really sure that what you're saying is correct? So as an exercise, I said let me go through and create from the spec an argument that supports my position for out of this cube and I won't go through all the details.

I just want to give you a sample of this. Now the spec is difficult to read, there's no question about it. It's difficult unless you're really somebody that sort of, you know like a wongth that really likes to think about this details. It's hard, I'm not saying that is easy, but I do think that we should pay a lot more attention to what we're doing in the specs.

I mean what were doing with JavaScript according to what the specs is, so let me make sure I'm on the right link, I think I am, yeah. All right, so why is my command F find not working? Of course, live I can't do. There it is, that's weird.

My browser's off the screen, there we go. Okay. So where would we start if we were asking. Because if you searched for the word this in the spec, you're obviously going to get several thousand examples of that grammatically speaking. So where would we start in terms of how to find something in the spec.

As a sort of an exercise for what to do. So as you start to get a little bit familiar with the spec and you understand how these things are laid out. You can start to get a little bit of experience. The best place to start is with this table of contents and briefly scan through the table of contents and see if you can find anything that mentions the this keyword.

And as we begin to scroll down. As we get a little bit closer, we're going to find I'm not seeing it here, but we'll find here in just a moment that there's a place to start about. Let me just cheat real quick and skip to the, there we go.

So I was going to search for this keyword, because that's what it says. So it's in Section 11.1. Now, okay, it evaluates to the this binding, okay, so now we're going to have to, this is follow the rabbit trail. We're going to have to go and check out what the this binding is.

So this starts to talk about execution context. And we see that this binding here, the value associated with it, well that's not terrible helpful. Let's see if we can keep going and find another example of the discussion about the this binding. And we're eventually going to get to
Kyle Simpson: This particular section of code.

Now this says when you're entering function code, what do you do? It says if the function code is in strict, then set the ThisBinding to thisArg. So if you see right there where it says thisArg. thisArg means that there was an argument passed to that function execution that says what this should be.

So right here, what we know is we're already at a layer of abstraction where when the function starts to execute, the decision for what this keyword has already been made and it's been passed in. And that's something that we can gather just from understanding that. That there's a thisArg that was passed in, but we know many of the times, when we write our function calls, we don't pass that in, so there must be some mechanism that's doing that.

So my next step would be then to say, where does it talk about the thisArg in the spec? This is literally the process that I went through to try to come up with this. We can read here, by the way in steps one and two, you can say that if it's in strict mode, it strictly uses whatever was passed in, but if it's not in strict mode that's .2.

And you pass in a null or undefined, then it instead defaults to the global object. So that's an interesting key, because we'll talk about this later, but there's an interesting key that the default binding rule that we'll talk about, it's the fourth of four rules that we'll talk about later today.

The default binding rule says that if you're in strict mode then the this keyword ends up as undefined. But if you're in non strict mode it ends up as the global object. And right there bam, in lines one and two, we see the evidence for that exposition of that particular rule.

So this is something where it doesn't actually, the way I wrote it out in the book, you're not going to find that sort of thing word for word in the same terminology. But you can still understand something about the way our language works. This is the official you know, sort of place that comes.

So how would we if we wanted to keep going down the rabbit trail how could we look at. Well we know that when we are dealing with you know function apply and function call we know there's always going to be a thisArg that's being passed in. So we can see those sections being referenced there.

But there's one other place that I want to call your attention to about the thisArg. Actually, let me scroll up to the top and start my search from the top.
Kyle Simpson: You see all these other places where there's things in the code that you can supply to thisArg manually.

Kyle Simpson: It wasn't the thisArg, sorry. What we want to do then is look for that this binding.
Kyle Simpson: Sorry, I'm, my searching skills are seeming to fail. I won't belabor this but you can continue to look through this spec and you can find out that there are other places in the spec where it will list these sort of bits and pieces of the rules.

And you do have to kind of put five or six different sentences together to kind of come up with a coherent understanding of how this key word gets bound. That can be frustrating, but it also can be empowering. The fact that there isn't anything magical happening in the language that isn't spelled out here in the spec.

That should be a confidence builder to you. That if there's ever something that's confusing in addition to all of the places where you can try to read blog posts and you can try to read books and you can try to understand what other people have to say, in addition to all of that stuff you can also go directly to the spec and see what the spec has to say.

It takes some practice, I've been working at this a while and I'm still like just barely starting to understand some of the conventions and the words that they use. Takes a little bit, but I think that's part of being having ownership over the web platform. So that's just a little kind of advocacy point to say I recommend as another piece of homework that at some point I'm going to teach you something today.

Like the disc bindings for instance. Or the way Lexical Scope works. I'm going to teach you something today. I recommend as a piece of homework that you don't just take my word for it. Go back and look at the spec and see what the spec has to say.

Just try your hand at searching through the spec and see if you can figure it out. So, that's my advocacy about the Equi Script spec. I think we should pay more attention to it as developers. Finally, it's important not only to know where the language is, but where the language is headed.

This is one of several different links that are out there, we could probably come up with others. But there's a whole bunch of proposals for the future of the language and that is ES6 which is impending upon us. It's coming very quickly. We'll talk a number of times about ES6 today, but there's also even ES7 and beyond stuff that's being discussed.

Things like macros which are likely going to come in the ES7-ish time range. Things like that. So there's a whole bunch of stuff that's being discussed about the the future of the language. Some of it sounds really cool, like macros, and some of it sounds really terrible like operator overloading, but they're being discussed, as futures of the language.

So, I don't think it's a good for us as a development community to turn a blind eye to that, and wait, you know, five years until it's already been decided. I think we need to take participate in that process now. The TC39 community is being incredibly open about keeping all that stuff out.

They publish notes from their bimonthly meetings. So I recommend you kind of take a look at what the spec is doing.

Ready to take your code to the next level?

Intense courses with world-class teachers and unlimited access to our growing library of videos for the great price of $39 per month.

Get Unlimited Access Now