The Difference Between Bind vs Call vs Apply in JavaScript
Usually, there is a lot of confusion around bind, call and apply. In summary, here are the differences between them.
Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Bind
.bind() is used to call a function with a given context. Using .bind() won’t call the function, only modifies the context.
// Since bind doesn't modify the original function, this.name will still be "Spongebob".
spongebob.greet.bind(patrick);
spongebob.greet(); // Hey, it's me, Spongebob...
// Assigning the bound greet to a variable and calling that will give back Patrick's details.
const greetPatrick = spongebob.greet.bind(patrick);
greetPatrick(); // Hey, it's me, Patrick...Copied to clipboard!
Call
.call() will call the function immediately and modifies the context.
// This will immediately calls greet with the context of patrick.
spongebob.greet.call(patrick);
// Since we call the function right away, the value of greetPatrick will be the return value
// When we don't have an explicit return statement eg.: 'return true;', "undefined" is returned implicitly
const greetPatrick = spongebob.greet.call(patrick);
console.log(greetPatrick); // undefined
spongebob.greet.call(spongebob, 'I\'m a good noodle!');Copied to clipboard!
Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Apply
apply functions as call. The only difference between the two is that while call accepts a list of arguments, apply accepts an array of arguments.
patrick.greet.apply(patrick, ['Is mayonnaise an instrument?']);Copied to clipboard!
Resources:
📚 More Webtips
Master the Art of Frontend
Unlimited access to hundreds of tutorials- Access to exclusive interactive lessons
- Remove ads to learn without distractions
