JS bind, call, and apply Methods: Full Tutorial

function greet(greeting, punctuation) {
  return `${greeting}, I'm ${this.name}${punctuation}`;
}
 
const alice = { name: "Alice" };
 
// call: invoke immediately, arguments listed one by one
greet.call(alice, "Hello", "!");     // "Hello, I'm Alice!"
 
// apply: invoke immediately, arguments as an array
greet.apply(alice, ["Hi", "?"]);     // "Hi, I'm Alice?"
 
// bind: does NOT invoke — returns a new function with this bound
const aliceGreet = greet.bind(alice);
aliceGreet("Hey", ".");              // "Hey, I'm Alice."

function introduce(role, company) {
  return `${this.name} — ${role} at ${company}`;
}
 
const dev = { name: "Sam" };
const mgr = { name: "Dana" };
 
introduce.call(dev, "Developer", "Acme Corp"); // "Sam — Developer at Acme Corp"
introduce.call(mgr, "Manager",   "Globex");    // "Dana — Manager at Globex"

// Borrow Array methods for array-like objects
function logArgs() {
  // arguments is array-like but lacks Array methods
  const arr = Array.prototype.slice.call(arguments);
  // OR: Array.from(arguments) in modern code
  return arr.join(", ");
}
 
logArgs("a", "b", "c"); // "a, b, c"
 
// Check type with Object.prototype.toString
const type = (val) => Object.prototype.toString.call(val).slice(8, -1);
type([]);          // "Array"
type(null);        // "Null"
type(new Date());  // "Date"
type(/regex/);     // "RegExp"

function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}
 
const numbers = [5, 10, 3, 8, 2];
sum.apply(null, numbers); // 28 — spread the array as args
// Modern equivalent: sum(...numbers) — spread syntax is usually preferred

const scores = [78, 92, 85, 61, 99, 73];
 
Math.max.apply(null, scores); // 99
Math.min.apply(null, scores); // 61
 
// Modern ES6 equivalent (preferred):
Math.max(...scores); // 99
Math.min(...scores); // 61

class EventBus {
  constructor() {
    this.listeners = [];
  }
 
  subscribe(fn) {
    this.listeners.push(fn);
  }
 
  emit(event) {
    this.listeners.forEach(fn => fn(event));
  }
}
 
class Notification {
  constructor(name) {
    this.name = name;
    this.count = 0;
  }
 
  handleEvent(event) {
    this.count += 1;
    console.log(`${this.name} received: ${event} (#${this.count})`);
  }
}
 
const bus = new EventBus();
const notif = new Notification("AlertBox");
 
// Without bind: this would be undefined inside handleEvent
bus.subscribe(notif.handleEvent.bind(notif));
bus.emit("login");  // "AlertBox received: login (#1)"
bus.emit("logout"); // "AlertBox received: logout (#2)"

function multiply(a, b) {
  return a * b;
}
 
const double  = multiply.bind(null, 2);  // a = 2, b = supplied later
const triple  = multiply.bind(null, 3);
const tenTimes = multiply.bind(null, 10);
 
double(5);    // 10
triple(5);    // 15
tenTimes(7);  // 70
 
// More practical example
function log(level, message) {
  console.log(`[${level.toUpperCase()}] ${message}`);
}
 
const info  = log.bind(null, "info");
const warn  = log.bind(null, "warn");
const error = log.bind(null, "error");
 
info("Server started");       // "[INFO] Server started"
warn("Rate limit approached"); // "[WARN] Rate limit approached"
error("Connection refused");   // "[ERROR] Connection refused"

// Pure function — doesn't use this: null is conventional
const nums = [3, 1, 4, 1, 5, 9];
nums.sort.call(null, (a, b) => a - b); // Unusual — just for illustration
Math.max.apply(null, nums);            // 9 — null is conventional here

function whatIsThis() { return this.x; }
 
const bound = whatIsThis.bind({ x: 1 });
console.log(bound());                         // 1
console.log(bound.call({ x: 999 }));          // Still 1 — cannot rebind
console.log(bound.apply({ x: 999 }));         // Still 1
console.log(bound.bind({ x: 999 })());        // Still 1 — re-binding a bound function is a no-op

// When you have discrete arguments — call
fn.call(ctx, arg1, arg2, arg3);
 
// When you have an array of arguments — apply (pre-ES6) or call + spread (ES6+)
fn.apply(ctx, argsArray);
fn.call(ctx, ...argsArray); // Modern equivalent — preferred