Practical Use Cases for call, apply, and bind

Practical Use Cases for call, apply, and bind

1. Borrowing Array Methods

const args = Array.prototype.slice.call(arguments);
const nodes = Array.prototype.forEach.call(document.querySelectorAll("*"), fn);

2. Fixing this in Callbacks

setTimeout(obj.greet.bind(obj), 1000);
button.addEventListener("click", obj.handleClick.bind(obj));

3. Partial Application

const add = (a, b, c) => a + b + c;
const add5 = add.bind(null, 5);
add5(3, 2); // 10

4. Finding Max/Min in Array

Math.max.apply(null, [1, 2, 3]); // 3
// or with spread:
Math.max(...[1, 2, 3]); // 3

5. Chaining Constructors

function Person(name) { this.name = name; }
function Employee(name, id) {
  Person.call(this, name); // borrow Person constructor
  this.id = id;
}

6. Context in forEach

array.forEach(function(item) { this.doSomething(item); }, context);
// or with bind:
array.forEach(this.doSomething.bind(this));

The Takeaway

Practical use cases: borrowing array methods (slice.call), fixing this in callbacks (bind), partial application (bind with preset args), Math.max/min with arrays (apply), chaining constructors (call), and context in forEach (second argument or bind).