Arrow Functions & Lexical this

[00:00:00]
>> Kyle Simpson: You certainly must be asking yourself at this point, but, what about arrow functions? Our good friend the arrow function. Let's come back to arrow functions and examine them within the context of what we've just discussed, which is the this keyword. Here you'll notice that I have an ask method on my workshop object.

[00:00:21]
And inside of it, I'm making a callback pass to setTimeout and it's an arrow function. And that this keyword, when the arrow function is invoked, is correctly is pointing at the workshop object.
>> Kyle Simpson: This is what we refer to as lexical this behavior. So let me clearly state for you what lexical this means, there's a lot of confusion around this topic.

[00:00:51]
Many people have in their minds a mental model that a arrow function is essentially a hardbound function to the parents this, that is not accurate. The proper way to think about what an arrow function is, an arrow function does not define a this keyword at all. There is no such thing as a this keyword in an arrow function.

[00:01:22]
Which means if you put a this keyword inside of an arrow function, it's gonna behave exactly like any other variable. Which means it's going to lexically resolve to some enclosing scope that does define of this key word. So when this particular case, the arrow function line 5, when we say this dot there is no this in that arrow function no matter how it gets invoked, so we lexically go up one level of scope which is, which function?

[00:01:51]
>> Speaker 2: [INAUDIBLE].
>> Kyle Simpson: The ask function. Workshop is not a function, workshop is an object. It goes out from the call back function, the arrow function, that scope to the enclosing scope, which is? Ask, and what is asks definition of the this key word? What line of code controls what the this keyword will point out inside of ask.

[00:02:23]
Line 10, because the ask functions this keyword gets set by the call site. And then when that call back gets later invoked, it’s essentially closed over. That parent scope that had a this keyword pointing at the workshop object. That's what we mean by lexical this. It's not a hard bound function.

[00:02:46]
It's a function that doesn't have a this at all. And so it revolves lexically, that means if it had to go up, five levels because you had five nested arrow functions, it just keeps going and going and going up the building elevator until it finds a function that defines a this keyword.

[00:03:05]
And whatever the this keyword points at for that function, that's what it uses.
>> Kyle Simpson: That is just not the correct explanation to describe it and many people have been arguing with me recently on Twitter saying, ,but it doesn't matter. Yes it does and here is the spec, the spec says, an arrow function does not define local bindings for arguments super this or new.target.

[00:03:36]
People sometimes like to shoot the messenger. I didn't write the spec. I'm just telling you what the spec says, okay? The spec says there is no this keyword. So I think the best outcome for you is when you think like the computer instead of trying to invent your own explanations, that may or may not deviate and create, and perpetuate wrong thinking and bugs.

[00:03:59]
I've said this earlier in the course. When you think incorrectly about how a piece of code works, even if it accidentally works at that moment, you're incorrect thinking will systemically lead to more bugs down the line. And there's only one fix for that. It's to think, like JavaScript thinks.

[00:04:21]
That's why I keep referencing in this course over and over and over again. What does the spec say? And it matters what the spec says so that we don't get our brains off on the wrong track and think about something. You might not think it would ever matter that an arrow function's not hard bound.

[00:04:38]
Well here's a really crazy corner case where it could matter. Remember how that this keyword behavior, the new keyword is more precedent than a hardbound function. That somehow for some crazy reason, if you call new on a hardbound function it overrides the hardbound and it makes it the new object.

[00:04:59]
Guess what happens when you call new on an arrow function. If an arrow function's hard bound, you ought to be able to call new on an arrow function and override its this key word. What happens when you call new on an arrow function, anybody ever try that before?

[00:05:15]
You actually get an exception. You're not allowed to call new on an arrow function. So it's not a hard bound function.
>> Kyle Simpson: It is a function that doesn't define on this keyword.