JavaScript Arrow Function 'this' Binding

JS Arrow Function this Binding

Arrow functions create a permanent link to the surrounding lexical scope through a mechanism called “lexical this”.

They form a closure over the current scope, including the value of this.

Example:

1
class Example {
2
  constructor() {
3
    this.value = 42
4
  }
5

6
  regularMethod() {
7
    console.log(this.value) // 'this' depends on how it's called
8
  }
9

10
  arrowMethod = () => {
11
    console.log(this.value) // 'this' is always the instance of Example
12
  }
13
}
14

15
const ex = new Example()
16
const regular = ex.regularMethod
17
const arrow = ex.arrowMethod
18

19
regular() // undefined (or throws error in strict mode)
20
arrow() // 42

regularMethod loses its this context when assigned to a variable.
arrowMethod retains its this context because it was bound to the instance when the arrow function was created.