How Lexical 'this' Works

In this blog, we will see what lexical this means in arrow functions and how it works with examples.

What is this in Javascript:

this keyword is a reference variable that refers to the current object and its value depends on how the function is called.

In other words, this is dynamic and changes based on the context of the function call. Sometimes it creates confusion, especially when working with nested functions.

this in Arrow function:

In Arrow functions, this has a fixed value that is determined by the lexical scope in which the function is defined. In other words, the value of this inside an arrow function is the same as the value of this outside the function. This means that arrow functions do not have their own this value, but instead inherit it from the surrounding scope.

Let's take a look at an example to better understand how lexical this works in arrow functions:

let person = {
    name: "Sandip",
    age: 25,
    sayHi: function() {
      console.log(`Hi, my name is ${this.name} and I am ${this.age} years old`);
    },
    sayHiArrow: () => {
      console.log(`Hi, my name is ${this.name} and I am ${this.age} years old`);
    }
  };
  person.sayHi(); // Hi, my name is Sandip and I am 25 years old
  person.sayHiArrow(); // Hi, my name is  and I am undefined years old

In this example, we have an object person with two methods: sayHi and sayHiArrow. The sayHi method is a regular function that uses this to access the name and age properties of the person object. The sayHiArrow method, on the other hand, is an arrow function that attempts to access the same properties using this.

When we call person.sayHi(), we get the expected output, which includes the values of name and age. However, when we call person.sayHiArrow(), we get undefined for both name and age. This is because the value of this inside the arrow function is not the person object, but the global object (or undefined in strict mode).

This example demonstrates the importance of understanding lexical this in arrow functions. In general, arrow functions should be used when you want to preserve the this value of the surrounding scope, such as in event handlers or when working with callbacks. However, if you need to access the this value of the object on which the method is called, you should use a regular function instead.

In conclusion, lexical this in arrow functions is a powerful feature of JavaScript that allows functions to inherit the this value of their enclosing lexical scope. This can help simplify code and reduce confusion around this binding. However, it is important to understand the limitations of lexical this and use it appropriately based on the requirements of your code.