Mastering "this" in JavaScript
When beginners start learning JavaScript, one topic often creates confusion very quickly: the keyword this. At first glance it looks like a small word, but the way it behaves changes depending on where and how it is used. That is why many developers understand variables, functions, and loops before they fully understand this.
The reason this feels difficult is simple: it does not always point to one fixed thing. In many programming languages, keywords behave in one predictable way, but in JavaScript, this depends on context. The same keyword can refer to different objects in different situations. Once you understand that one idea clearly, the topic becomes much easier.
Why JavaScript Needs this
In real programs, we often create objects that contain data and behaviour together. Imagine an object that stores information about a user. That object may contain a name, age, and also a function that prints details about the user.
const user = {
name: "Rahul",
age: 22,
showInfo() {
console.log(this.name);
}
};
user.showInfo();
Inside showInfo(), the keyword this refers to the object that is calling the method. Since user.showInfo() is called by user, this.name means user.name.
Without this, JavaScript would not know which object's data you want to access when the same method could exist inside many different objects.
this Inside an Object Method
The most natural place to understand this is inside an object method.
const car = {
brand: "Toyota",
start() {
console.log(this.brand + " is starting");
}
};
car.start();
Here this refers to car because car.start() is the caller.
This means JavaScript checks what appears before the dot. Whatever is before the dot becomes this.
That is why:
car.start();
makes this equal to car.
If another object uses the same function, this changes automatically.
const bike = {
brand: "Yamaha",
start: car.start
};
bike.start();
Now this becomes bike, so output becomes "Yamaha is starting".
This shows an important truth: this depends on who calls the function, not where the function was originally written.
this Inside a Regular Function
Things become different when a normal function is called directly.
function show() {
console.log(this);
}
show();
In browser non-strict mode, this becomes the global object, which is usually window.
That means JavaScript behaves as if the function was attached globally.
In strict mode, it changes:
"use strict";
function show() {
console.log(this);
}
show();
Now this becomes undefined.
This happens because strict mode avoids automatic global binding.
That is why strict mode is safer. It prevents accidental mistakes.
Why Beginners Get Confused When Methods Are Detached
A common confusion happens when a method is stored in another variable.
const person = {
name: "Amit",
speak() {
console.log(this.name);
}
};
const talk = person.speak;
talk();
Many expect output "Amit", but it gives undefined in strict mode.
Why?
Because talk() is now a normal function call. There is no object before the dot anymore.
Originally:
person.speak();
had person as caller.
But now:
talk();
has no caller object.
So this loses connection.
This is one of the most important practical issues developers face in real projects.
Solving the Problem with bind()
JavaScript gives a direct solution through bind().
const talk = person.speak.bind(person);
talk();
Now this is permanently attached to person.
Even if called later somewhere else, this remains fixed.
bind() creates a new function where this cannot change.
This is especially useful when passing functions into callbacks.
this Inside Arrow Functions
Arrow functions behave differently from regular functions.
They do not create their own this.
Instead, they take this from the surrounding place.
const student = {
name: "Riya",
show: function () {
const inner = () => {
console.log(this.name);
};
inner();
}
};
student.show();
Output is "Riya".
Why?
Because arrow function looks outside and borrows this from show().
The surrounding show() method has this = student.
So arrow function uses the same value.
This makes arrow functions very useful inside nested functions.
Why Regular Inner Functions Often Break
Compare with normal inner function:
const student = {
name: "Riya",
show: function () {
function inner() {
console.log(this.name);
}
inner();
}
};
student.show();
Here inner() becomes normal function call.
So this becomes global object or undefined.
That is why arrow functions became popular: they solve this old JavaScript pain naturally.
this Inside Constructor Functions
Before classes became common, JavaScript used constructor functions.
function User(name) {
this.name = name;
}
const u1 = new User("Arjun");
console.log(u1.name);
When using new, JavaScript creates a fresh object and makes this point to that new object.
So:
this.name = name;
means:
store name inside newly created object.
Without new, it becomes dangerous.
function User(name) {
this.name = name;
}
User("Arjun");
Now this points to global object in non-strict mode.
That can create unexpected global variables.
That is why forgetting new creates bugs.
this Inside Classes
Modern JavaScript classes work similarly.
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log("Hello " + this.name);
}
}
const p = new Person("Neha");
p.greet();
Inside class methods, this refers to current object instance.
This is easier to read than constructor functions, but internally the idea remains similar.
this in Event Handlers
In browser events, this usually refers to the element receiving the event.
button.addEventListener("click", function () {
console.log(this);
});
Inside regular function, this becomes clicked button.
But arrow function changes that behavior.
button.addEventListener("click", () => {
console.log(this);
});
Now arrow function does not use button as this.
It uses outer scope instead.
That is why regular function is often preferred in DOM events.
The Real Rule That Makes Everything Easy
The easiest rule to remember is this:
JavaScript does not decide this when a function is created. It decides this when the function is called.
That single idea explains almost every case.
If an object calls function, this becomes that object.
If function is called normally, this becomes global object or undefined.
If arrow function is used, this comes from outer scope.
If bind() is used, this is permanently fixed.
If new is used, this becomes new object.
Once you think in terms of calling style instead of function location, the topic becomes much easier.
Why this Matters in Real Projects
In small examples, this may seem like a theory topic, but in real applications it appears everywhere.
It controls class methods, event systems, reusable objects, API handling, timers, callbacks, and frameworks.
Many difficult bugs in JavaScript happen because developers lose track of this.
That is why understanding it early saves a lot of debugging time later.
Final Thought
this is often feared because its behaviour changes, but the truth is that JavaScript follows rules very consistently. The challenge is simply learning those rules carefully.
The moment you stop asking “What is this?” and start asking “Who called this function?”, most confusion disappears.