🔥 THE ULTIMATE JS LESSON — this Keyword (Browser & Node)
Greetings, fellow developers! Today, we dive into a comprehensive exploration of the this keyword and the powerful call / apply / bind methods.
🚀 Repo: javascript-complete-mastery
🚀 1. What is this in JavaScript?
this depends entirely on HOW a function is called, not where it is written.
🧠 2. 5 Core Rules of this (Browser + Node)
Rule 1 — Global Context
Browser
console.log(this);
👉 window
Node
console.log(this);
👉 {}
Rule 2 — Function Context
Non-strict mode
function test() {
console.log(this);
}
test();
👉 Browser → window
👉 Node → global
Strict mode
"use strict";
function test() {
console.log(this);
}
test();
👉 undefined
Rule 3 — Method Call (Object Method)
this = object before dot
const user = {
name: "Usman",
greet() {
console.log(this.name);
}
};
user.greet();
✔ "Usman"
Rule 4 — Constructor / Class
function Person(name) {
this.name = name;
}
const p = new Person("Usman");
console.log(p.name);
👉 this refers to the new object
Rule 5 — Arrow Functions (NO own this)
const obj = {
value: 10,
test: () => {
console.log(this);
}
};
obj.test();
👉 Browser: window
👉 Node: {}
🔥 Browser vs Node Quick Comparison
| Scenario | Browser | Node |
|---|---|---|
| Global context | window |
{} |
| Function (non strict) | window |
global |
| Function (strict) | undefined |
undefined |
| Method | Object | Object |
| Arrow | Parent scope | Parent scope |
⚡ 3. Deep Examples (Tricky)
Example — Losing this
const user = {
name: "Usman",
greet() {
console.log(this.name);
}
};
const x = user.greet;
x();
❌ undefined
Example — Fix with bind
const x = user.greet.bind(user);
x();
✔ "Usman"
Arrow inside methods
const user = {
name: "Usman",
greet: function () {
setTimeout(() => {
console.log(this.name);
}, 100);
}
};
user.greet();
✔ "Usman"
Arrow in object (incorrect assumption)
const obj = {
a: 10,
print: () => console.log(this.a)
};
obj.print();
❌ undefined
🧩 Event Listeners
Normal function
button.addEventListener("click", function() {
console.log(this);
});
👉 this = button element
Arrow function
button.addEventListener("click", () => {
console.log(this);
});
👉 this = window
📦 Node.js Module Wrapper
(function(exports, require, module, __filename, __dirname) {
// code
})();
So:
console.log(this); // {}
📝 Summary Cheat Sheet
this = depends on how the function is called
Browser
- Global → window
- Function non strict → window
- Strict → undefined
- Method → object
- Arrow → parent
Node
- Global → {}
- Function non strict → global
- Strict → undefined
- Method → object
- Arrow → parent
🏋️♂️ PRACTICE SECTION
✅ EASY (3)
Problem 1
console.log(this);
✔ Browser → window
✔ Node → {}
Problem 2
function test() {
console.log(this);
}
test();
✔ Browser → window
✔ Node → global
Problem 3
const obj = {
a: 5,
show() {
console.log(this.a);
}
};
obj.show();
✔ 5
⚡ MEDIUM (3)
Problem 1
const obj = {
a: 10,
b: () => console.log(this.a)
};
obj.b();
✔ undefined
Problem 2
"use strict";
function x() {
console.log(this);
}
x();
✔ undefined
Problem 3
const user = {
name: "Ali",
greet() {
setTimeout(function() {
console.log(this.name);
}, 0);
}
};
user.greet();
✔ undefined
🔥 HARD (4)
Problem 1
const obj = {
name: "Usman",
greet() {
return () => console.log(this.name);
}
};
const x = obj.greet();
x();
✔ "Usman"
Problem 2
class A {
constructor() {
this.num = 100;
}
show() {
console.log(this.num);
}
}
const a = new A();
const s = a.show;
s();
✔ undefined
Problem 3
const obj = {
x: 15,
y: {
z: function() {
console.log(this.x);
}
}
};
obj.y.z();
✔ undefined
Problem 4
let a = {
value: 50,
print: function() {
(function() {
console.log(this.value);
})();
}
};
a.print();
✔ undefined
🚀 THE ULTIMATE JS LESSON — call(), apply(), bind()
JavaScript gives us three powerful methods to manually control the value of this inside a function.
These are essential for interview questions, real-world bug fixing, and writing professional code.
🔥 1. Why do we need call/apply/bind?
Because sometimes, a function loses its this:
function greet() {
console.log(this.name);
}
const user = { name: "Usman" };
greet(); // ❌ undefined
We want to run greet with this = user.
That’s where these methods come in.
🧠 2. call() — calls the function immediately
func.call(thisValue, arg1, arg2, ...)
Example
function greet(age) {
console.log(this.name, age);
}
const user = { name: "Usman" };
greet.call(user, 22);
✔ Sets this = user
✔ Executes immediately
✔ Arguments passed one-by-one
🧠 3. apply() — same as call, but arguments in an array
func.apply(thisValue, [arg1, arg2, ...])
Example
greet.apply(user, [22]);
✔ Same output
✔ Just a different argument format
🧠 4. bind() — returns a NEW function with fixed this
const newFn = func.bind(thisValue, arg1, arg2);
Example
const greetUser = greet.bind(user, 22);
greetUser();
✔ Does NOT run immediately
✔ Creates a new function with permanent this
🔑 5. The Three in One Line
call → call immediately (args individually)
apply → call immediately (args in array)
bind → return new function (does NOT run)
📦 6. Real-world Uses
✔ Borrowing methods
let obj1 = { name: "Ali" };
let obj2 = { name: "Usman" };
function sayHi() {
console.log("Hi " + this.name);
}
sayHi.call(obj2);
✔ Using Array methods on non-arrays
const nums = {
0: 4,
1: 8,
length: 2
};
console.log(Array.prototype.join.call(nums, "-"));
✔ Fixing this in event handlers
button.addEventListener("click", obj.method.bind(obj));
✔ Currying with bind
function multiply(a, b) {
return a * b;
}
const double = multiply.bind(null, 2);
console.log(double(5)); // 10
🧨 7. Tricky & Important Behaviors
❗ Arrow functions IGNORE call/apply/bind
const obj = { a: 10 };
const x = () => console.log(this.a);
x.call(obj); // ❌ still not obj
Arrow functions use lexical this, so you cannot change it.
❗ bind creates a new function (original stays unchanged)
function a() {}
const b = a.bind({});
console.log(a === b); // false
❗ Multiple binds → first one wins
const x = greet.bind(obj1).bind(obj2);
x(); // uses obj1
⚡ 8. Browser vs Node?
No difference in behavior.
call/apply/bind work the same in both.
Only the default this differs, not these methods.
🧩 9. Practice Problems
✅ EASY (3 Problems)
Problem 1 — Output?
function say() {
console.log(this.x);
}
const obj = { x: 10 };
say.call(obj);
Solution
10
Problem 2 — Output?
function sum(a, b) {
console.log(a + b);
}
sum.apply(null, [5, 7]);
Solution
12
Problem 3 — Output?
function greet(name) {
console.log("Hi " + name);
}
const g = greet.bind(null, "Usman");
g();
Solution
Hi Usman
⚡ MEDIUM (3 Problems)
Problem 1 — Output?
const user = {
name: "Ali",
say() {
console.log(this.name);
}
};
const fn = user.say;
fn.call(user);
Solution
Ali
Problem 2 — Output?
function add(a, b) {
console.log(this.x + a + b);
}
const obj = { x: 5 };
add.call(obj, 10, 15);
Solution
30
Problem 3 — Output?
function intro(age, country) {
console.log(this.name, age, country);
}
const p = { name: "Usman" };
intro.apply(p, [22, "PK"]);
Solution
Usman 22 PK
🔥 HARD (4 Problems)
Problem 1 — Output?
const a = { value: 50 };
function print() {
console.log(this.value);
}
const b = print.bind(a);
b.call({ value: 100 });
Solution
50
Problem 2 — Output?
const obj = {
x: 10,
y: function() {
console.log(this.x);
}
};
const z = obj.y.bind({ x: 99 });
z();
Solution
99
Problem 3 — Output?
function show() {
console.log(this.a);
}
const o1 = { a: 1 };
const o2 = { a: 2 };
const f = show.bind(o1);
f.call(o2);
Solution
1
Problem 4 — Output?
function multiply(a, b, c) {
console.log(a * b * c);
}
const f = multiply.bind(null, 2);
f.apply(null, [3, 4]);
Solution
24
Congratulations on mastering this, call(), apply(), and bind()! To further enhance your JavaScript journey, I’ve developed a free, structured repository featuring topic-by-topic training, ranging from beginner to advanced levels, organized into a 42-day mastery plan. Completing this resource will significantly ease your transition into frameworks and stacks like React, Node, and Next.js.
🚀javascript-complete-mastery
Top comments (0)