Kevin Powell - Community•2w ago

use cases for arrow functions inheriting their this value

Hey, mdn says that the this value of arrow functions equates to the parent scope, i don't understand how that could be useful? For example, if i defined an arrow function in an object below that utilized the this keyword, how would i benefit from it being equal to the window object? (i'm aware if i want that behaviour then to use a regular function of course but the concept confuses me)

const myObject = {
  arrowExample: () => {
    console.log(this) // Window
  }
}

myObject.arrowExample()

const myObject = {
  arrowExample: () => {
    console.log(this) // Window
  }
}

myObject.arrowExample()

i'd appreciate any help. thanks in advance.

8 Replies

Choo♚𝕂𝕚𝕟𝕘•2w ago

You are looking at it from the wrong perspective. Referring to the window object is a consequence of how things work rather than a goal set forth by the designers. The proper way to think about it is that arrow functions don't have a "this" binding of their own. For any regular identifier, like a variable name, if it's not defined in the local scope, outer scopes are searched until a match is found. The same is happening with "this". It's not defined in the arrow function, but there is one in some outer scope, so the one in the closest outer scope is used. The window is an object and it's the outermost object, so that is what "this" refers to if there is nothing else for it to point to. Also note that window is only the outermost scope in the front end. In the back end, it could be module or globalThis, depending on if the code is run in a module or not.

snxxwyyOP•2w ago

Ahh okay that makes more sense. So for regular functions is it safe to assume that the this value is always what object it’s located in since it can bind its own?

Choo♚𝕂𝕚𝕟𝕘•2w ago

No. It depends on how the function is called. It doesn't always bind to the object that it is in.

snxxwyyOP•2w ago

Oh so for example if you pass a function into another via a callback parameter it would lose its this value right? That’s the sort of thing you mean by ‘depends how it’s called’?

Choo♚𝕂𝕚𝕟𝕘•2w ago

const myObject = {
  num: 42,
  arrowExample(){
    console.log(this.num);
  }
}
const external = myObject.arrowExample;
external();//undefined
const bound = myObject.arrowExample.bind(myObject);
bound();//42

const myObject = {
  num: 42,
  arrowExample(){
    console.log(this.num);
  }
}
const external = myObject.arrowExample;
external();//undefined
const bound = myObject.arrowExample.bind(myObject);
bound();//42

snxxwyyOP•2w ago

Ah yeah the external example is what I meant by the callback example, I should have said ‘function being referenced in a variable` or something. But I see now yeah. I appreciate the help

Choo♚𝕂𝕚𝕟𝕘•2w ago

I just realized that I should have renamed it because it's not an arrow function anymore, but that wasn't the main point. I used your code as the starter for simplicity.

snxxwyyOP•2w ago

Ah yeah no worries, I got what you meant

Gaming

Programming

use cases for arrow functions inheriting their this value

Did you find this page helpful?