What Is This Keyword in JavaScript? Explained With Real Examples

If you have been learning JavaScript, you have probably asked yourself these questions:

• What is this keyword in JavaScript?
• Why does this change value?
• Why does it work in one place but break in another?

The this keyword in JavaScript is one of the most confusing concepts for beginners. But here is the good news: once you understand one simple rule, everything becomes much easier.

The value of this depends on how a function is called — not where it is written.

In this complete guide, you will learn:

• What is this keyword in JavaScript
• How this works in different situations
• this in global scope
• this inside regular functions
• this inside objects
• Arrow functions vs regular functions
• call(), apply(), and bind()
• this with constructors and classes
• Common mistakes and best practices

What Is this in JavaScript?

Imagine you are in a classroom. If a teacher says, “I am your teacher,” the word “I” refers to the teacher. But if a student says, “I am tired,” the word “I” now refers to the student.

The word “I” changes meaning depending on who is speaking.

In JavaScript, this works in a similar way. It refers to the object that is currently calling the function.

So instead of asking, “Where is this written?”, always ask, “Who is calling this function?”

1. this in the Global Scope

Let us start simple.

console.log(this);

In a browser environment, this will print:

window

That means in the browser, the global object is window, and this refers to it.

In Node.js (CommonJS), this refers to module.exports. In ES Modules, this is undefined.

So even in the global scope, the value of this depends on the environment.

2. this Inside a Regular Function

Now let us look at a simple function.

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

show();

In non-strict mode (normal JavaScript), this will refer to the global object (window in browsers).

But what happens in strict mode?

"use strict";

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

show();

Now the output is:

undefined

In strict mode, JavaScript does not automatically bind this to the global object.

This is why strict mode is safer. It prevents accidental global usage.

3. this Inside an Object Method

Now let us see where this becomes powerful.

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

user.greet();

The output will be:

Rahul

Why?

Because the function is being called by user. So this refers to the object before the dot.

Rule to remember:

If a function is called using an object (object.method()), then this refers to that object.

To understand objects more deeply, visit this guide:
How JavaScript Objects Work (Prototype Chain, Inheritance & Property Descriptors Explained).

4. What Happens When We Lose Context?

Now let us break it.

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

const greetFunction = user.greet;
greetFunction();

Now the output will be:

undefined

Why did this happen?

Because the function is no longer called using user. The connection is lost.

This problem is called losing context.

5. Arrow Functions and this

Arrow functions do not have their own this. They inherit this from their girding compass.

const stoner = {
  name: "Rahul",
  hail: () => {
    console.log(this.name);
  }
};

stoner.hail();

This won't work as anticipated because arrow functions do not bind this to the object.

Correct operation inside styles

const stoner = {
  name: "Rahul",
  hail(){
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
};

stoner.hail();

Then, the arrow function inherits this from hail().

6. call(), apply(), and bind()

call apply bind javascript

JavaScript provides styles to manually set this.

Using call()

function hail(){
  console.log(this.name);
}

const stoner = { name: "Rahul" };

hail.call(stoner);

call() incontinently invokes the function with a specified this.

Using apply()

hail.apply(stoner);

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

Using bind()

const boundGreet = hail.bind(stoner);
boundGreet();

bind() returns a new function with permanently bound this.

7. this with Constructor Functions

When using the new keyword, this refers to the newly created object.

function Person(name) {
  this.name = name;
}

const p1 = new Person("Rahul");
console.log(p1.name);

Here, this points to the new object being created.

8. this in JavaScript Classes

Classes are just a cleaner way to write constructor functions.

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

  greet() {
    console.log(this.name);
  }
}

const user = new Person("Rahul");
user.greet();

Inside class methods, this refers to the instance of the class.

Common Mistakes with this Keyword

• Using arrow functions as object methods
• Losing context when passing functions as callbacks
• Forgetting strict mode behavior
• Not understanding call-site rules

Always remember: focus on how the function is called.

Final Summary: What Is This Keyword in JavaScript?

The this keyword in JavaScript is a special keyword that refers to the object that is currently calling the function.

• In global scope → depends on environment
• In regular functions → depends on how it is called
• In object methods → refers to the object
• In arrow functions → inherits from outer scope
• With call(), apply(), bind() → manually controlled
• With new keyword → refers to newly created object

Once you truly understand that this depends on how a function is called, JavaScript becomes much easier to understand.

And the next time someone asks, “What is this keyword in JavaScript?”, you will not just answer — you will explain it confidently.