JavaScript call, apply, and bind Explained

JavaScript call, apply, and bind Explained | DevPrep

These three methods control what this refers to inside a function. They're essential for understanding JavaScript's execution model.

The Problem

call() — Invoke with explicit this

apply() — Same as call, but array arguments

bind() — Returns a new function with fixed this

Comparison

Method	Invokes immediately?	Arguments	Returns
call	Yes	Individual	Function result
apply	Yes	Array	Function result
bind	No	Individual (partial)	New function

Polyfill (Interview Classic)

Arrow Functions

Arrow functions ignore call, apply, and bind. Their this is always lexical (from the enclosing scope).

const user = {
  name: "Rahul",
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

user.greet(); // "Hello, I'm Rahul" ✅

const greetFn = user.greet;
greetFn(); // "Hello, I'm undefined" ❌ (this lost!)

function greet(greeting, punctuation) {
  console.log(`${greeting}, I'm ${this.name}${punctuation}`);
}

const rahul = { name: "Rahul" };
const priya = { name: "Priya" };

greet.call(rahul, "Hello", "!");  // "Hello, I'm Rahul!"
greet.call(priya, "Hi", ".");     // "Hi, I'm Priya."

// Arguments passed individually

greet.apply(rahul, ["Hello", "!"]);  // "Hello, I'm Rahul!"

// Practical use: finding max in array
const numbers = [5, 2, 8, 1, 9];
Math.max.apply(null, numbers); // 9

// Modern alternative: spread operator
Math.max(...numbers); // 9

const greetRahul = greet.bind(rahul);
greetRahul("Hey", "!"); // "Hey, I'm Rahul!"

// Partial application
const helloRahul = greet.bind(rahul, "Hello");
helloRahul("!"); // "Hello, I'm Rahul!"

// Common in React (class components)
class App extends React.Component {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
  }
}

// Implement bind from scratch
Function.prototype.myBind = function(context, ...args) {
  const fn = this;
  return function(...newArgs) {
    return fn.apply(context, [...args, ...newArgs]);
  };
};

// Implement call
Function.prototype.myCall = function(context, ...args) {
  context = context || globalThis;
  const sym = Symbol();
  context[sym] = this;
  const result = context[sym](...args);
  delete context[sym];
  return result;
};

JavaScript call, apply, and bind Explained

Related Articles

System Design #12: Design a Multi-Step Form Wizard

Mastering Senior-Level JavaScript Interview Concepts

System Design #9: Design a Collaborative Text Editor

Comments (0)