Power of "this" keyword in JavaScript

Behavior of this keyword is different in environments it surrounded with. It behaves differently in global and local contexts. It behave differently in regular functions and arrow functions.

Table of contents

this in Global Context

JavaScript not only runs on browser. It runs on different devices and environment as well.

Whenever you run this keyword inside global space, it represents global object.

When you run console.log(this);, it totally depends on where you are running your code.

1. If you are running this in browser console, it will give window object.
2. If you are running this in node terminal, it will give global object.

this inside function scope

Original value of this keyword inside function is undefined

If value of this keyword is undefined or null, then this keyword will be replaced by global object in non-strict mode. It’s called this substitution.

function func() {
  console.log(this); // global object (window or global)
}

this in strict mode

If value of this keyword is undefined or null then it will not replaced by global object in strict mode.

In strict mode, value of this inside function stays undefined.

"use strict";

function func() {
  console.log(this);
}

func(); // undefined

If function is called with window object reference then value of this becomes window object.

"use strict";

function func() {
  console.log(this);
}

window.func(); // window object

this inside object’s method

What is difference between function and method?
Ans: If you are making function as part of object then it becomes method.

It refers to the object that is currently executing the function.

const obj = {
  name: "sagar",
  getName: function () {
    console.log(this); // refers to obj object
    console.log(this.name); // refers to name of obj object
  },
};
obj.getName();

this inside arrow function

Arrow functions don’t bind their own this. So it refers in its lexical scope.

const obj = {
  x: 10,
  a: () => {
    console.log(this); // ❌ NOT obj
  },
};

obj.a(); // Window or global object

Arrow function a() is defined inside an object literal. Object literals don’t create new scope. So it looks up to the next enclosing scope which is global scope.

this inside nested function

arrow function inside regular function

const obj2 = {
  x: 10,
  outerFun: function () {
    const a = () => {
      console.log(this);
    };
    a();
  },
};

// Outer function is regular function so it will have context of obj2
// Outer function scope is lexical scope for inner arrow function
obj2.outerFun(); //obj2

Global Scope (this = Window)
└── outerFun → regular function → this = obj2 ✅
└────── arrow function a → no own this
└────────── inherits this from outerFun → this = obj2 ✅

arrow function inside arrow function

const obj = {
  x: 10,
  outerFun: () => {
    const a = () => {
      console.log(this);
    };
    a();
  },
};

// Both arrow function so it will look for global scope as lexical scope
obj.outerFun(); // Window or {}

Global Scope (this = Window) ✅
└── outerFun → arrow function → no own this
│ ↑ looks up → finds Window or {}
└── inner arrow function a → no own this
↑ looks up → outerFun → still no this
↑ looks up → Global → finds Window or {}

regular function inside arrow function

const obj3 = {
  x: 10,
  outerFun: () => {
    function a() {
      console.log(this);
    }
    a();
  },
};

// Inner function is regular function, so check section 2
obj3.outerFun(); // global object (window or {})

regular function inside regular function

const obj4 = {
  x: 10,
  outerFun: function () {
    function a() {
      console.log(this);
    }
    a();
  },
};
// Inner function is regular function, so check section 2
obj4.outerFun(); // global object (window or {})

this inside DOM

value of this inside DOM is reference to HTML elements.

<button onClick="alert(this)"> Click me </button>
<!-- [object ButtonElement] -->

In this example, it will return the object and reference of Button Element.

Thank you for reading article about this keyword in details.

Connect with me on X or LinkedIn, if you have any feedback or suggestion.