"this" in JavaScript – The Ultimate Guide

In JavaScript, this is not a variable — it’s a binding that is determined by how a function is called, not where it’s defined.

What is this in JavaScript?

this refers to the object that is executing the current function.

But the meaning of this depends on how and where a function is called — not how or where it's written.

Why this Is Important?

• Used to access object properties inside methods
• Makes your functions context-aware
• Vital in OOP, event handlers, classes, callbacks, etc.

1. this in Global Context

In the global scope, this refers to:

• window object in browsers
• global object in Node.js

console.log(this); // In browser → Window object

2. this Inside Regular Functions

In non-strict mode, this refers to the global object:

function showThis() {
  console.log(this);
}
showThis(); // Window (or global in Node)

In strict mode, this becomes undefined:

"use strict";
function showThis() {
  console.log(this);
}
showThis(); // undefined

3. this Inside an Object Method

const user = {
  name: "Shubham",
  greet: function () {
    console.log("Hello, " + this.name);
  },
};

user.greet(); // Hello, Shubham

Here, this refers to the user object because greet is called as user.greet().

4. this Inside Arrow Functions

Arrow functions do not have their own this. They inherit this from the surrounding lexical context.

const user = {
  name: "Shubham",
  greet: () => {
    console.log("Hello, " + this.name);
  },
};

user.greet(); // Hello, undefined

❌ Why? Because arrow functions don’t bind this — so it refers to the global object (window), and this.name is undefined.

Get shubham’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

✅ Fix:

const user = {
  name: "Shubham",
  greet() {
    const inner = () => console.log("Hello, " + this.name);
    inner();
  },
};

user.greet(); // Hello, Shubham

5. this in Constructor Functions

In constructor functions, this refers to the newly created object.

function Person(name) {
  this.name = name;
}
const p = new Person("Shubham");
console.log(p.name); // Shubham

6. this in Class Methods

class User {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log("Hi, " + this.name);
  }
}

const user = new User("Shubham");
user.greet(); // Hi, Shubham

7. this in Event Handlers

document.querySelector("button").addEventListener("click", function () {
  console.log(this); // Refers to the button
});

If you use an arrow function here:

document.querySelector("button").addEventListener("click", () => {
  console.log(this); // Refers to window (wrong in most cases)
});

8. Using bind(), call(), and apply() to Control this

call()

Calls a function with a given this value.

function greet() {
  console.log("Hi, " + this.name);
}
const user = { name: "Shubham" };
greet.call(user); // Hi, Shubham

apply()

Same as call(), but arguments are passed as an array.

greet.apply(user); // Hi, Shubham

bind()

Returns a new function with this bound permanently.

const boundGreet = greet.bind(user);
boundGreet(); // Hi, Shubham

🚀 Final Thoughts

Understanding this is a game changer for mastering JavaScript. Whether you're working with classes, DOM events, or functional programming, knowing what this points to — and when — will help you write more predictable and bug-free code.

🔗 Stay Connected

If this helped clarify this, follow me for more JavaScript content:

• 💻 GitHub: @FullStackDeveloperShubham
• 📸 Instagram: @developer_shubham_
• 🐦 Twitter: @ItsDevShubham
• 👨‍💼 LinkedIn: @Shubham Gaikwad