Bla Bla Bla.. Okay; hear me out..!! Hundreds of blogs and tutorials explain call, bind, and apply. Heck, even ChatGPT and Copilot can simplify them for you! So, why another post? Well, this one’s not for you—it’s my self-note as I revisit JavaScript fundamentals. Even after 8 years in front-end development, I sometimes mix up these methods. Turns out, the confusion often stems from how they’re grouped in interview questions. Let me break it down for you—this time, in a way that sticks. Can We Skip to the Good Part? Why is it always call, bind, and apply in interviews? Functionally, call, and apply are closer—they invoke the function immediately—while bind returns a new function. That’s why I’ve grouped them this way in the title. Let's look at their usage to understand it better. What Is Common Among Call, Bind & Apply? call, bind, and apply are methods available on functions that allow you to explicitly set the value of this and pass arguments to the function. What Is the Difference Between Call, Bind & Apply? While Call and Apply Immediately invoke the function, the Bind method does not immediately invoke the function. instead, it returns a new function with this set to a specified value, and this returned function can be invoked/executed later. What Is the Difference Between Call and Apply Then? While both Call and Apply immediately invoke the function with the custom this, it’s how they take the additional argument that differentiates them. While Call takes the individual arguments, Apply takes an array of arguments. Examples Let’s look at the example below to understand the use of call, apply, and bind. function Greetings(greeting,punctuation){
    return `${greeting} ${this.name} ${punctuation}`
}

var person = {
    name : "Nandan"
}

// Call: Immediately invokes the function with individual arguments
console.log(Greetings.call(person,"Hello","!")); // Output : Hello Nandan !

// Apply: Immediately invokes the function, but takes arguments as an array
console.log(Greetings.apply(person,["Hello","!"])); // Output : Hello Nandan !

// Bind: Returns a new function with `this` bound to the specified value
let greet = Greetings.bind(person,"Hello","!");
console.log(greet()); // Output : Hello Nandan !

//Note:
console.log(Greetings.bind(person,"Hello","!")); // Output : It will return a function Some Additional Examples • Using call:Borrowing methods from another object: let person1 = { name: "Nandan" };
let person2 = { name: "Kumar" };

function introduce() {
    console.log(`Hi, my name is ${this.name}`);
}

introduce.call(person1); // Hi, my name is Nandan
introduce.call(person2); // Hi, my name is Kumar • Using apply: Finding the max value in an array: let numbers = [1, 2, 3, 4, 5];
console.log(Math.max.apply(null, numbers)); // 5 • Using bind: Event handling with custom this: let button = document.getElementById("myButton");
let user = {
    name: "Nandan",
    greet() {
        console.log(`Hello, ${this.name}`);
    }
};

button.addEventListener("click", user.greet.bind(user)); Additionally, I hope this table will help you understand it better. Feature

Execution

Arguments

Use Case



call

Executes the function immediately

Passed individually

When you know arguments at call time



apply

Executes the function immediately

Passed as an array

When arguments are in an array



bind

Returns a new function (does not execute)

Optionally pre-filled for the new function

When you need a reusable or pre-configured function That’s all, folks! I hope you found this short note on Call, Apply & Bind helpful. If you enjoyed this, check out more articles on my website, nandan.dev Feel free to comment, email me at connect@nandan.dev, or connect with me on Twitter, Instagram, or GitHub. Don’t forget to subscribe to my newsletter for regular updates on JavaScript topics! Twitter | Instagram | Github | Website Bla Bla Bla.. Okay; hear me out..!! Hundreds of blogs and tutorials explain call, bind, and apply. Heck, even ChatGPT and Copilot can simplify them for you! So, why another post? Well, this one’s not for you —it’s my self-note as I revisit JavaScript fundamentals. you Even after 8 years in front-end development, I sometimes mix up these methods. Turns out, the confusion often stems from how they’re grouped in interview questions. Let me break it down for you—this time, in a way that sticks. Can We Skip to the Good Part? Why is it always call, bind, and apply in interviews? Functionally, call, and apply are closer—they invoke the function immediately—while bind returns a new function. That’s why I’ve grouped them this way in the title. Let's look at their usage to understand it better. What Is Common Among Call, Bind & Apply? call , bind , and apply are methods available on functions that allow you to explicitly set the value of this and pass arguments to the function. call bind apply this What Is the Difference Between Call, Bind & Apply? While Call and Apply Immediately invoke the function, the Bind method does not immediately invoke the function. instead, it returns a new function with this set to a specified value, and this returned function can be invoked/executed later. this What Is the Difference Between Call and Apply Then? While both Call and Apply immediately invoke the function with the custom this, it’s how they take the additional argument that differentiates them. While Call takes the individual arguments, Apply takes an array of arguments. Examples Let’s look at the example below to understand the use of call, apply, and bind. function Greetings(greeting,punctuation){
    return `${greeting} ${this.name} ${punctuation}`
}

var person = {
    name : "Nandan"
}

// Call: Immediately invokes the function with individual arguments
console.log(Greetings.call(person,"Hello","!")); // Output : Hello Nandan !

// Apply: Immediately invokes the function, but takes arguments as an array
console.log(Greetings.apply(person,["Hello","!"])); // Output : Hello Nandan !

// Bind: Returns a new function with `this` bound to the specified value
let greet = Greetings.bind(person,"Hello","!");
console.log(greet()); // Output : Hello Nandan !

//Note:
console.log(Greetings.bind(person,"Hello","!")); // Output : It will return a function function Greetings(greeting,punctuation){
    return `${greeting} ${this.name} ${punctuation}`
}

var person = {
    name : "Nandan"
}

// Call: Immediately invokes the function with individual arguments
console.log(Greetings.call(person,"Hello","!")); // Output : Hello Nandan !

// Apply: Immediately invokes the function, but takes arguments as an array
console.log(Greetings.apply(person,["Hello","!"])); // Output : Hello Nandan !

// Bind: Returns a new function with `this` bound to the specified value
let greet = Greetings.bind(person,"Hello","!");
console.log(greet()); // Output : Hello Nandan !

//Note:
console.log(Greetings.bind(person,"Hello","!")); // Output : It will return a function Some Additional Examples • Using call:Borrowing methods from another object: Using let person1 = { name: "Nandan" };
let person2 = { name: "Kumar" };

function introduce() {
    console.log(`Hi, my name is ${this.name}`);
}

introduce.call(person1); // Hi, my name is Nandan
introduce.call(person2); // Hi, my name is Kumar let person1 = { name: "Nandan" };
let person2 = { name: "Kumar" };

function introduce() {
    console.log(`Hi, my name is ${this.name}`);
}

introduce.call(person1); // Hi, my name is Nandan
introduce.call(person2); // Hi, my name is Kumar • Using apply: Finding the max value in an array: Using let numbers = [1, 2, 3, 4, 5];
console.log(Math.max.apply(null, numbers)); // 5 let numbers = [1, 2, 3, 4, 5];
console.log(Math.max.apply(null, numbers)); // 5 • Using bind: Event handling with custom this: Using let button = document.getElementById("myButton");
let user = {
    name: "Nandan",
    greet() {
        console.log(`Hello, ${this.name}`);
    }
};

button.addEventListener("click", user.greet.bind(user)); let button = document.getElementById("myButton");
let user = {
    name: "Nandan",
    greet() {
        console.log(`Hello, ${this.name}`);
    }
};

button.addEventListener("click", user.greet.bind(user)); Additionally, I hope this table will help you understand it better. Feature

Execution

Arguments

Use Case



call

Executes the function immediately

Passed individually

When you know arguments at call time



apply

Executes the function immediately

Passed as an array

When arguments are in an array



bind

Returns a new function (does not execute)

Optionally pre-filled for the new function

When you need a reusable or pre-configured function Feature

Execution

Arguments

Use Case call

Executes the function immediately

Passed individually

When you know arguments at call time apply

Executes the function immediately

Passed as an array

When arguments are in an array bind

Returns a new function (does not execute)

Optionally pre-filled for the new function

When you need a reusable or pre-configured function Feature Execution Arguments Use Case Feature Feature Feature Execution Execution Execution Arguments Arguments Arguments Use Case Use Case Use Case call Executes the function immediately Passed individually When you know arguments at call time call call call Executes the function immediately Executes the function immediately Passed individually Passed individually When you know arguments at call time When you know arguments at call time apply Executes the function immediately Passed as an array When arguments are in an array apply apply apply Executes the function immediately Executes the function immediately Passed as an array Passed as an array When arguments are in an array When arguments are in an array bind Returns a new function (does not execute) Optionally pre-filled for the new function When you need a reusable or pre-configured function bind bind bind Returns a new function (does not execute) Returns a new function (does not execute) Optionally pre-filled for the new function Optionally pre-filled for the new function When you need a reusable or pre-configured function When you need a reusable or pre-configured function That’s all, folks! I hope you found this short note on Call, Apply & Bind helpful. If you enjoyed this, check out more articles on my website, nandan.dev nandan.dev nandan.dev Feel free to comment, email me at connect@nandan.dev , or connect with me on Twitter, Instagram, or GitHub. Don’t forget to subscribe to my newsletter for regular updates on JavaScript topics! connect@nandan.dev connect@nandan.dev Twitter | Instagram | Github | Website Twitter Twitter Instagram Instagram Github Github Website Website

I Vibe Coded an AI App and Got DDOS'd Instead

Javascript Closures: What Are They?

Read My Stories

Portfolio

Call, Apply, and Bind Simplified for JavaScript Developers

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

6 HTML Pitfalls and Gotchas Every Developer Should Avoid

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

6 HTML Pitfalls and Gotchas Every Developer Should Avoid

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps