The Lexical Magic of ‘this’ inside arrow function

Lexical Insights: How ‘this’ Finds Its Way in Arrow Functions

this in arrow function

Before jumping on how this works inside arrow function, we have to first understand two terms:
1. Lexical Scope
2. Resolving Scope Lexically

Lexical Scope

Lexical means fixed, and Lexical scope means a scope which is fixed.
And when does it got fixed?
At the time we wrote our code.

Lexical scope in JavaScript refers to the scope determined by the physical placement of code within the source code. In simpler terms, it’s about where variables and functions are declared. Here are a couple of examples:

// Global scope
const globalVar = "I'm global"; 
// It's scope is fixed as soon as we declared the variable.

function globalScopeFunction() {

// globalScopeFunction knows where to find globalVar
// Because it's scope is already fixed.
console.log(globalVar); 
}
globalScopeFunction(); // Outputs: "I'm global"

Finding Scope Lexically with Examples

Finding the scope lexically means determining the scope of a variable or function based on its position in the source code.

To find scope of something lexically,
- first we search it in current scope,
-if that something does not exists in current scope,
— then we will move one step up and search that something in parent scope,
- and if that something is not available in parent scope, then we will keep moving up, until we reach to window object.

If that something is not available in window, then we simply get undefined.

function outer() {
  const message = "Hello, ";
  function inner(name) {
    console.log(message + name);
 // Lexically accesses message from the outer scope
  }
  return inner;
}

const greet = outer();
greet("Alice"); // Outputs: "Hello, Alice"

‘this’ in Arrow Functions Explained

In arrow functions, ‘this’ is determined lexically, meaning it takes the value of ‘this’ from its enclosing scope. Unlike regular functions, arrow functions don’t bind their own ‘this’.

Inside arrow function, this is undefined. Which is resolved Lexically.

Let’s explore:

Example 1: ‘this’ in Arrow Functions

function RegularFunction() {
    this.value = '9';
    setTimeout(() => {
      console.log(this.value);  // outputs '9'
      // 'this' is lexically calculated, 
      //. here this will point to window object
  }, 1000);
}

const regularInstance = new RegularFunction(); 
// Outputs: undefined or unexpected value

Example 2:

const obj = {
    data: [1, 2, 3],
    processData: function () {
      this.data.forEach((num) => {
        console.log(num * this.multiplier);
      });
    },
    multiplier: 2
  };
  
  obj.processData(); // Output 2, 3, 6

Example 3:

function test() {
    console.log('test', this); // // Outputs {name:'X'}
        const parentArrow = ()=> {

             const childArrow = ()=> {
                console.log(this); // Outputs {name:'X'}
             }

             childArrow();
        }

        parentArrow();
}


test.call({name:'X'});

Example 4:

function test() {
    console.log('test', this); // // Outputs window object
        const parentArrow = ()=> {

             const childArrow = ()=> {
                console.log(this); // Outputs window object
             }

             childArrow();
        }

        parentArrow();
}

test();

Read about how this works inside normal function:

Deciphering ‘this’ in JavaScript: 5 Rules Every Developer Should Know