Arrow Function Scope & this

[00:00:00]
>> Will Sentance: I think this is the scope of nice moment to see the increasingly more standard way of doing this nowadays. That uses this feature of a new way of defining or declaring or saving functions in JavaScript that we saw yesterday. Which was our arrow function style. Cuz our arrow function style, of declaring or saving functions,

[00:00:30]
>> Will Sentance: Automatically, I'm gonna tell you right now, is lexically scoped. That means where we save the function or, let me set that clear on that, no, sorry. Is, it's this assignment is lexically scoped. That is to say, when we save the function, when we execute it, what this is set to is determined by where the function was saved.

[00:00:53]
So if it was saved where this is user 1, when we end up running it, this inside will be this value from where the function was saved, which is User1. So let's just see that example here. We've defined in now with an arrow function, let's make this slight change.

[00:01:06]
Let's quickly execute it together, one more time, make sure we've got it. Let's quickly execute it one more time, so we're executing here. These are little intricacies here, but little fun bonus bits I wanted to include for you all. So we're running user1.increment. It runs the increment method from function store via user1.

[00:01:26]
I said you go through that quickly. Dan, user1.increment, user1 is in?
>> Speaker 2: Global memory.
>> Will Sentance: Global memory, we look for the increment method, is it there?
>> Speaker 2: Nope, so we go to the proto, and let me find it in the user function should store object.
>> Will Sentance: Fantastic, we grab its code, and we thought executing it.

[00:01:44]
And the first thing and local memory Dan is?
>> Speaker 2: Constant at 1, this.
>> Will Sentance: Yeah, as a parameter, no problem, which is?
>> Speaker 2: User1.
>> Will Sentance: Which is what we hope because that's what we're running this function owns that we hope it's going to affect this. We always wanna have our functionality and our data.

[00:02:01]
Able to use the functionality directly on the data right there and then that's the kind of the whole goal of this. So don't forget that as we go into these intricacies and don't forget that overall goal. This is what a fantastic looking good. Let's declare that function Dan.

[00:02:14]
>> Speaker 2: add1 and.
>> Will Sentance: In the arrow function style, but it's no different. There it is. And we immediately do what with it, Dan?
>> Speaker 2: We call it, e execute it.
>> Will Sentance: We call it, e execute it. Brand new what, Dan?
>> Speaker 2: Execution context.
>> Will Sentance: Execution beautiful, and in it's local memory.

[00:02:36]
Because it's an arrow function. Let me put like a, I don't know, it's not really necessary, it's in our function. It's this assignment inside the local memory, will it be global because note, our one simple rule is any function that's being run to the right hand side of the dot whatever the left hand side that's going to be the list assignment.

[00:02:59]
But when there's no dot here, it defaults the global to the window. Unless that function was defined as an arrow function, in which case Dan our this assignment will be what?
>> Speaker 2: User1 still.
>> Will Sentance: User one, exactly what was this assignment around the definition of that 1 is lexically scoped.

[00:03:19]
It staticly the scope, this assignment. It's a statically or lexically this assignment, that is to say it's from the moment of definition that we set our this to User1. Therefore, our line of code this.score plus plus, is going to evaluate to what Todd, now?
>> Speaker 2: User1.score++.
>> Will Sentance: Fantastic, user1.score++.

[00:03:46]
You gotta go a few levels out. 1, 2, 3, there's our score property. It would increment to four but, let's increment it to,
>> Will Sentance: 5, fantastic people. This now I think is a nice way of solving this problem for writing this clean code here. All right people, let's have to start with thumbs here at this point on any of those bonus pieces anyone want to add any thumbs, yeah, go ahead Peter.

[00:04:17]
>> Speaker 2: Would declaring the increment property as an arrow function as well help us?
>> Will Sentance: Would it though? Because if we did so, when we ran that increment. So Peter's question there is what if we say an increment as an arrow function? If we ran it, would it's this assignment be determined by where it's being run to the right hand side of the dot or by where it was stored, which was in global?

[00:04:46]
By where it was stored, and therefore the whole thing would fall apart. And now this will not be User1. So we don't want to use arrow functions for our include for our methods on objects. But for the functions inside of them that we want to have point there this to the method in which they were defined, perfect.