DEV Community

Manoj
Manoj

Posted on

JavaScript this Explained — With Simple Examples

The value of this in JavaScript is context-dependent, and it changes based on where and how it is used.

Global Context

When used outside any function i.e., in global scope this keyword refers to global object.

In browsers, the global object is called window.

console.log(this); // Logs the window object
console.log(this === window); // true
Enter fullscreen mode Exit fullscreen mode

In Node.js, the global object is called global.

console.log(this); // Logs global object, if called on top-level logs {}
Enter fullscreen mode Exit fullscreen mode

Functional Context

The value of this in a function depends on how the function is called, not how or where it’s defined.

Standalone Function:

When the function is called as an standalone function — i.e., invoked directly using it’s name, without being attached to any object — the value of this refers to global object.

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

showThis() //logs window (in browser) and global object (in Node.js)
Enter fullscreen mode Exit fullscreen mode

Function as an Object Method:

When a function is assigned as a method of an object, and is called using that object then this refers to the object that called the method.

const person = {
name: "Manoj",
greet: function () {
console.log(this.name);
}
};

person.greet(); // Output: "Manoj"
Enter fullscreen mode Exit fullscreen mode

greet is a method of the person object. When person.greet() is called, this inside the function refers to person, so this.name becomes "Manoj".

Detached Method (Lost Context):

When a method (i.e., a function defined inside an object) is assigned to a variable and then called without the object, it loses its original context — and therefore this does not refer to the original object anymore.

const person = {
name: "Manoj",
greet: function () {
console.log(this.name);
}
};

const greet = person.greet;
greet(); // Output: undefined
Enter fullscreen mode Exit fullscreen mode

Here function is just getting copied, not the binding of this to person. So when the greet() is called there is no object binding thus this becomes global object and this.name is undefined.

Regular Function Inside Object:

A regular function inside an object is not called as a method of the object — instead, it’s just a normal function declared inside another method or object. In this case, this keyword refers to global object since it is a regular function, not tied to object.

const person = {
name: "Manoj",
greet: function () {
function inner() {
console.log(this.name);
}
inner();
}
};

person.greet() //Output: undefined
Enter fullscreen mode Exit fullscreen mode

Inside inner, this is not bound to person. It's a regular function call, this is the global object, and this.name is undefined.

Arrow Functions:

Arrow functions in JavaScript do not have their own this binding. Instead, they inherit this from the surrounding lexical context in which they are defined. This means the value of this inside an arrow function is determined by where the function is created—not where it is called.

const person = {
 name: "Manoj",
 regularGreet: function () {
  console.log("Regular Function:", this.name); // 'this' refers to person
  const arrowInner = () => {
   console.log("Arrow Function Inside Regular Method:", this.name); // 'this' still refers to person
  };

  arrowInner();

 }
};

person.regularGreet();

// Output:
// Regular Function: Manoj
// Arrow Function Inside Regular Method: Manoj
Enter fullscreen mode Exit fullscreen mode

The regularGreet method is called on the person object, so this refers to person. Inside it, the arrow function arrowInner inherits this from regularGreet, since arrow functions don’t have their own this. As a result, this.name inside arrowInner also refers to person.name.

Overall Summary:

  • The this keyword in JavaScript is context-dependent, referring to different objects based on how and where the function is invoked.
  • Arrow functions inherit this from their surrounding context, while regular functions bind this to the object calling the function.
  • Methods inside objects use this to refer to the object.

If you found this helpful, consider bookmarking, sharing, or giving a ❤️.
Happy coding! 💻✨

Top comments (0)