When to Use JS bind vs call vs apply: Full Guide

// Method borrowing — use array method on array-like object
function logAll() {
  const args = Array.prototype.slice.call(arguments);
  console.log(args.join(" | "));
}
logAll("a", "b", "c"); // "a | b | c"
 
// Converting array-like to array (pre-ES6; prefer Array.from in modern code)
const nodeList = document.querySelectorAll("p");
const arr = Array.prototype.slice.call(nodeList);
 
// Type checking with Object.prototype.toString
function getType(val) {
  return Object.prototype.toString.call(val).slice(8, -1);
}
getType([]);      // "Array"
getType(new Map()); // "Map"

function withTimestamp() {
  this.createdAt = new Date().toISOString();
}
 
function User(name, email) {
  this.name = name;
  this.email = email;
  withTimestamp.call(this); // Mixin: add createdAt to User instance
}
 
const u = new User("Alice", "alice@example.com");
console.log(u.createdAt); // ISO timestamp

function Animal(name) { this.name = name; }
function Dog(name, breed) {
  Animal.call(this, name); // Initialize Animal props on this Dog instance
  this.breed = breed;
}

// Dynamic argument count from an array
function buildUrl(protocol, host, port, path) {
  return `${protocol}://${host}:${port}${path}`;
}
 
const parts = ["https", "api.example.com", 443, "/v2/users"];
buildUrl.apply(null, parts); // "https://api.example.com:443/v2/users"
 
// Math.max / Math.min with array of numbers
const prices = [12.99, 49.99, 7.50, 99.00, 24.99];
const lowest  = Math.min.apply(null, prices); // 7.50
const highest = Math.max.apply(null, prices); // 99.00

// apply (works everywhere including older environments)
Math.max.apply(null, prices);
 
// Spread (ES6+, cleaner, same result)
Math.max(...prices);
 
// apply is still useful when you must pass a true array object (e.g., Function.prototype.apply itself)
// or when dealing with very large arrays where spread might hit argument length limits

class VideoPlayer {
  constructor(videoElement) {
    this.video = videoElement;
    this.isPlaying = false;
 
    // These will be called later by event listeners — bind now
    this.handlePlay  = this.handlePlay.bind(this);
    this.handlePause = this.handlePause.bind(this);
    this.handleEnd   = this.handleEnd.bind(this);
 
    this.video.addEventListener("play",  this.handlePlay);
    this.video.addEventListener("pause", this.handlePause);
    this.video.addEventListener("ended", this.handleEnd);
  }
 
  handlePlay()  { this.isPlaying = true;  console.log("Playing"); }
  handlePause() { this.isPlaying = false; console.log("Paused"); }
  handleEnd()   { this.isPlaying = false; console.log("Ended"); }
 
  destroy() {
    // Need original references to removeEventListener
    this.video.removeEventListener("play",  this.handlePlay);
    this.video.removeEventListener("pause", this.handlePause);
    this.video.removeEventListener("ended", this.handleEnd);
  }
}

// API request function
async function apiRequest(method, endpoint, data) {
  const response = await fetch(endpoint, {
    method,
    body: data ? JSON.stringify(data) : undefined,
    headers: { "Content-Type": "application/json" },
  });
  return response.json();
}
 
// Partially applied variants
const get    = apiRequest.bind(null, "GET");
const post   = apiRequest.bind(null, "POST");
const put    = apiRequest.bind(null, "PUT");
const del    = apiRequest.bind(null, "DELETE");
 
// Clean call sites
get("/api/users");
post("/api/users", { name: "Alice" });
del("/api/users/42");

// bind in constructor approach
class Component {
  constructor() {
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() { console.log(this); }
}
 
// Class field arrow approach (ES2022+)
class Component {
  handleClick = () => { console.log(this); }; // Arrow — this is always the instance
}

// OLD: apply to spread array as args
fn.apply(null, arr);
// NEW: spread syntax
fn(...arr);
 
// OLD: bind for callback this
setTimeout(this.update.bind(this), 100);
// NEW: arrow wrapper
setTimeout(() => this.update(), 100);
 
// OLD: Object.prototype.toString.call for type — still valid, no good modern alternative
Object.prototype.toString.call(value).slice(8, -1);