JavaScript Notes
Master the JavaScript
What is this?
this is a special keyword in JavaScript that refers to the object that is currently executing the code. It's not fixed — its value depends entirely on how and where the function is called, not where it is defined.
Think ofthisas a name badge: when you walk into a company, your badge says who you are in *that context*. If you move to another company, the badge updates.thisis who "I" refers to in the current execution context.
Rule 1 — Default Binding (Standalone Call)
function showThis() {
console.log(this);
}
showThis(); // Called as standalone functionWindow { ... } // Browser: global window object
// In strict mode: undefined"use strict";
function showThisStrict() {
console.log(this);
}
showThisStrict(); // undefined in strict modeundefined
Rule 2 — Implicit Binding (Method Call)
When a function is called as a method of an object, this = that object.
const user = {
name: "Ravi",
greet() {
console.log(`Hello, I am ${this.name}`);
}
};
user.greet(); // called ON user → this = userHello, I am Ravi
The "dot rule": this = object to the LEFT of the dot
const teacher = {
subject: "JavaScript",
introduce() {
return `I teach ${this.subject}`;
}
};
const student = {
subject: "Maths",
introduce: teacher.introduce // same function, different object
};
console.log(teacher.introduce()); // teacher is left of dot
console.log(student.introduce()); // student is left of dotI teach JavaScript I teach Maths
Rule 3 — Explicit Binding (call, apply, bind)
You manually set what this should be.
call() — invoke immediately with this
function introduce(greeting, punctuation) {
return `${greeting}, I am ${this.name}${punctuation}`;
}
const person1 = { name: "Neha" };
const person2 = { name: "Aman" };
console.log(introduce.call(person1, "Hi", "!"));
console.log(introduce.call(person2, "Hello", "."));Hi, I am Neha! Hello, I am Aman.
apply() — invoke immediately, args as array
Namaste, I am Neha!
bind() — returns a new function with fixed this
const greetNeha = introduce.bind(person1, "Hey");
console.log(greetNeha("!"));
console.log(greetNeha("?"));Hey, I am Neha! Hey, I am Neha?
call vs apply vs bind
| Method | When called | Arguments | Returns |
|---|---|---|---|
fn.call(ctx, a, b) | Immediately | Comma-separated | Function result |
fn.apply(ctx, [a, b]) | Immediately | As array | Function result |
fn.bind(ctx, a) | Returns new fn | Comma-separated | New function |
Rule 4 — new Binding (Constructor Call)
When a function is called with new, a brand new object is created and this = that new object.
function Person(name, age) {
this.name = name; // this = the new object being created
this.age = age;
this.greet = function() {
return `Hi, I'm ${this.name} (${this.age})`;
};
}
const p1 = new Person("Priya", 24);
const p2 = new Person("Rohan", 28);
console.log(p1.greet());
console.log(p2.greet());
console.log(p1.name, p2.name);Hi, I'm Priya (24) Hi, I'm Rohan (28) Priya Rohan
Rule 5 — Arrow Functions & this
Arrow functions do NOT have their own this. They inherit this from the enclosing lexical scope where they were defined.
Regular: undefined Arrow: Countdown
Why arrow functions are great for callbacks
Anu — Engineering Bala — Engineering Charu — Engineering
this in Classes (ES6)
class BankAccount {
constructor(owner, balance) {
this.owner = owner;
this.balance = balance;
}
deposit(amount) {
this.balance += amount;
return `${this.owner}'s balance: ₹${this.balance}`;
}
withdraw(amount) {
if (amount > this.balance) return "Insufficient funds";
this.balance -= amount;
return `Withdrawn ₹${amount}. Balance: ₹${this.balance}`;
}
}
const acc = new BankAccount("Riya", 10000);
console.log(acc.deposit(5000));
console.log(acc.withdraw(3000));Riya's balance: ₹15000 Withdrawn ₹3000. Balance: ₹12000
this Binding Priority Order
Priority (highest to lowest):
1. new binding new Fn()
↓
2. Explicit binding fn.call(ctx) / fn.bind(ctx)()
↓
3. Implicit binding obj.method()
↓
4. Default binding fn() → global or undefinedArrow functions bypass all these rules — they always use lexical this.
Common Mistakes ❌
1. Losing this when extracting a method
const user = { name: "Tara", greet() { return `Hi ${this.name}`; } };
const fn = user.greet; // extracted — no longer called ON user
console.log(fn()); // Hi undefined (this = global)
// ✅ Fix: bind
const boundFn = user.greet.bind(user);
console.log(boundFn()); // Hi TaraHi undefined Hi Tara
2. Arrow function as object method (wrong use)
Hi undefined Hi Aman
3. this in setTimeout without binding
Interview Questions 🎯
Q1. What is the this keyword in JavaScript? > this refers to the object that is currently executing the function. Its value is determined by how the function is called, not where it's defined.
Q2. What are the 4 rules of this binding? > 1. Default: standalone fn() → global/undefined; 2. Implicit: obj.fn() → obj; 3. Explicit: .call()/.apply()/.bind() → provided context; 4. New: new Fn() → newly created object.
Q3. What is the difference between call(), apply(), and bind()? > call() invokes immediately, args comma-separated. apply() invokes immediately, args as array. bind() returns a new function with fixed this, does not invoke immediately.
Q4. How does this work in arrow functions? > Arrow functions don't have their own this. They lexically inherit this from the enclosing function/scope where they were defined, ignoring how they're called.
Q5. Why does extracting a method lose this? > When you do const fn = obj.method, you get the function without the object context. When fn() is called, it's a standalone call → default binding applies (global/undefined).
Q6. Why should you NOT use arrow functions as object methods? > Arrow functions inherit this from the enclosing scope (usually global or module scope), not from the object. So this.property won't refer to the object's property.
Q7. What is new binding? > When a function is called with new, JavaScript creates a new empty object, sets this to it, runs the function, and returns the new object automatically.
Q8. What is the priority order of this binding rules? > new > explicit (call/bind/apply) > implicit (method call) > default (standalone).
Key Takeaways 🏁
thisis determined at call time, not at definition time (except arrow functions)- 4 rules: Default → global | Implicit → left-of-dot obj | Explicit → provided ctx | New → new object
call(ctx, args)andapply(ctx, [args])invoke immediately;bind(ctx)returns a new function- Arrow functions don't have their own
this— they use the enclosing scope'sthis - Use regular functions for object methods (need own
this) - Use arrow functions for callbacks inside methods (need to preserve outer
this) - Priority:
new>call/bind/apply> method call > standalone call
Exam Focus
Revise definitions, diagrams, examples, and short-answer points for JavaScript this Keyword - Complete Guide with Binding Rules & Examples.
Interview Use
Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.
Search Terms
javascript-complete-guide, javascript master course, javascript, complete, guide, objects, this, keyword
Related JavaScript Master Course Topics