Understanding Call, Bind and Apply in JavaScript
If you have been writing JavaScript for a while, you have probably seen this behaving in unexpected ways. Sometimes it works perfectly, sometimes it gives you undefined , and you are left wondering what went wrong.
In this article, we will cover what this means, how it behaves in different situations, and how call(), apply(), and bind() let you control it — with simple examples throughout. By the end, this will no longer feel like magic.
What is this?
this is a special keyword in JavaScript. It refers to the object that is currently calling the function.
The simplest way to think about it:
this = who is calling the function right now
It is not fixed. It changes depending on how and where the function is called.
this Inside an Object
When a function is called as a method of an object, this refers to that object.
Here student is calling greet() — so this inside greet() refers to student. That is why this.name gives us 'Riya'.
this Inside a Normal Function
When a function is called on its own (not as a method), this refers to the global object — or undefined in strict mode.
function showName() {
console.log(this);
}
showName(); // global object (window in browser) or undefined
This is where it slightly gets confused. The function is not attached to any object — so this does not know what to refer to.
Why does the first console.log work but the second one fails?
The first one works:
console.log('Hello, I am ' + this.name); // works
Because this line is inside greet() — and greet is called as student.greet(). JavaScript sees "student is calling greet" → so this = student → this.name = 'Riya'
The second one fails:
innerFunc(); // called on its own
Look at how innerFunc is called — just innerFunc() — no object before it! JavaScript sees "nobody is calling innerFunc, it's just called alone" → so this = global object → global object has no name property → this.name = undefined
student.greet() → this = student (student is calling it)
innerFunc() → this = nobody (called alone, no object)
Golden rule: this is decided by WHO calls the function — not WHERE the function is written. Even though innerFunc is written inside the student object, it is called alone without any object. JavaScript does not care where you wrote it — it only cares how you called it!
What is call()?
call() lets you borrow a method from one object and use it with another object.
You manually tell JavaScript — "call this function, but set this to THIS object".
Syntax:
functionName.call(thisValue, arg1, arg2, ...)
Example:
introduce is not inside any object — but call() lets us set this to student1 or student2 on the fly.
What is apply()?
apply() does exactly the same thing as call() — the only difference is how you pass arguments.
call() → arguments passed one by one
apply() → arguments passed as an array
Syntax :
functionName.apply(thisValue, [arg1, arg2, ...])
Example :
Both give the same output — the only difference is the array syntax.
When to use apply()?
When your arguments are already stored in an array:
const details = ['Web Dev', 'Pune'];
introduce.apply(student1, details); // convenient!
Memory trick: Apply = Array
What is bind()?
bind() is different from call() and apply(). Instead of calling the function immediately, bind() returns a new function with this permanently set.
Syntax:
const newFunc = functionName.bind(thisValue, arg1, arg2, ...)
Example:
bind() is useful when you want to save a function for later use with a specific this value.
Difference Between call, apply and bind
| Calls function immediately ? | How args are passed | |
|---|---|---|
| call() | yes | one by one |
| fn.call(obj,a,b) | ||
| apply() | yes | As an array |
| fn.apply(obj,[a,b]) | ||
| bind() | No | |
| Returns new function | One by one | |
| fn.bind(obj,a,b) |
Simple memory trick:
call → Call immediately, comma-separated args.
apply → Apply immediately, Array args.
bind → Bind and save for later.
Putting It All Together
Let us now use everything in one place.
Step 1 — Create an object with a method using this
Step 2 — Borrow that method using call()
Step 3 — Use apply() with array arguments
Step 4 — Use bind() and store the function
Output :
Quick Reference Summary
What is this?
A keyword that refers to the object currently calling the function. Changes based on how the function is called.
What is call()?
Calls a function immediately with a specific this value. Arguments passed one by one.
What is apply()?
Same as call() but arguments are passed as an array. Useful when args are already in an array.
What is bind()?
Returns a new function with this permanently locked. Does not call the function immediately.
Key Difference
call() and apply() execute immediately. bind() returns a new function to call later.
Conclusion
this, call(), apply(), and bind() are some of the most misunderstood parts of JavaScript — but once you understand that this simply means "who is calling the function", everything else falls into place.
call() and apply() let you borrow methods and run them immediately. bind() lets you create a reusable function with this locked in. Together they give you full control over how functions execute.
Open VS Code, run the assignment steps, and experiment with your own objects. The best way to make this click is to break it on purpose and see what happens!
