How the this Keyword Behaves in JavaScript(Easy Explanation)

If you’ve ever seen the word this in JavaScript and felt a little confused, you’re not alone! this can seem tricky at first because it doesn’t always mean the same thing — it depends on where and how you use it. But don’t worry! In this blog, we’ll explain this in a simple way with easy examples, so you can understand it clearly and use it without any confusion.

In JavaScript, the this keyword refers to the object that is currently executing the function. In simple words, this represents who is calling the function. Depending on how the function is called, this can point to different objects like a regular object, the window object in browsers, or even undefined in strict mode.

The behavior of this in JavaScript can change depending on where and how it is used. When used inside an object, this usually refers to that object itself. But when used inside a regular function (not inside an object), this behaves differently — it typically refers to the global object (window in browsers) or undefined in strict mode. Understanding this difference is very important because it helps you write correct and predictable code.

How this Works Inside an Object?

Here’s a simple explanation you can write for this code to explain how this behaves inside an object:

When this is used inside an object’s method (a function inside an object), it refers to the object itself. In the example below, this inside the getCityName Function refers to the address object:

const address = {
    name: "Rahul",
    getCityName: function () {
        console.log(this);
    }
}

address.getCityName(); // Output: address object

When we call address.getCityName(), the object address is the one calling the method. So, inside getCityName, this points to address, and if you console.log(this), it will print the entire address object.

In JavaScript, when you call a function as a method of an object (using dot notation like object.function()), this inside that function automatically refers to the object before the dot.

address.getStreetName = function () {
    console.log(this);
}

address.getStreetName(); // Output: address object

Even though getStreetName was added later, when you call address.getStreetName(),

• address is the object calling the function.
• So, inside getStreetName, this will again point to the address object.
• As a result, console.log(this) will print the complete address object.

✅ It behaves exactly the same way as getCityName, because it is still being called by the object address.

In short:
➡️ Who calls the function decides what this refers to.
➡️ Here, address calls the function, so this = address.

How this Works Inside the Function?

Here’s a simple explanation you can use for how this behaves in a regular function (outside an object):

When a regular function is called without any object (just by its name), the value of this depends on how the code is running:

• In normal mode (non-strict mode), this inside a function refers to the global object.
  • In browsers, the global object is window.
• In strict mode ('use strict';), this will be undefined.

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

getCityName(); // Output: window object (in browsers)

In this case, getCityName is called normally — no object is calling it. So by default, in a browser environment:

• this refers to the window object.
• console.log(this) will print the window object (a huge object with many properties and methods).

Important Tip:
If you add 'use strict'; at the top of your code, the same function will print undefined instead of window because strict mode disables automatic binding to the global object.

'use strict';

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

getCityName(); // Output: undefined

✅ In short:

• In normal mode → this inside a function = window.
• In strict mode → this inside a function = undefined.

How this Works Inside the Constructor Function?

In JavaScript, when you use a function as a constructor (by calling it with the new keyword), this behaves differently.
Here’s how it works:

• When you call a function with new, JavaScript creates a new empty object.
• Inside the constructor function, this automatically points to that new object.
• You can then add properties and methods to this, and the new object will be returned.

function getCityName(city) {
    this.city = city;
    console.log(this);
}

const city = new getCityName("Hyderabad");

What happens here:

1. new getCityName("Hyderabad") creates a new object.
2. Inside the function, this.city = city; adds a city property to the new object.
3. console.log(this) prints the new object, which looks like:
   { city: "Hyderabad" }
4. Finally, this new object is stored in the variable city.

✅ In short:

• Using new changes the behavior of this.
• this points to a newly created object.
• You can attach properties to this, and the new object is returned automatically.

Frequently Asked Questions (FAQs):

• What is the this keyword in JavaScript?
• How does this behave inside an object method?
• What does this refer to inside a regular function?
• How does this behave in a constructor function?
• Does this behave differently in arrow functions?

Know about Vibe Coding!