Callapplybind in Javascript

Learn about callapplybind in javascript with practical examples and code snippets.

call() - Individual Arguments

"I'm Kuldeep, 25 years old, from Mumbai, India" "I'm Ramesh, 30 years old, from Delhi, India".

Code

function introduce(location, country) {
  console.log(`I'm ${this.name}, ${this.age} years old, from ${location}, ${country}`);
}
const person1 = { name: "Kuldeep", age: 25 };
const person2 = { name: "Ramesh", age: 30 };
introduce.call(person1, "Mumbai", "India");
introduce.call(person2, "Delhi", "India");

apply() - Array of Arguments

"I'm Kuldeep, 25 years old, from Mumbai, India" "I'm Ramesh, 30 years old, from Delhi, India".

Code

introduce.apply(person1, ["Mumbai", "India"]);
introduce.apply(person2, ["Delhi", "India"]);

bind() - Returns Bound Function

"I'm Kuldeep, 25 years old, from Mumbai, India" "I'm Ramesh, 30 years old, from Delhi, India".

Code

const introduceKuldeep = introduce.bind(person1);
introduceKuldeep("Mumbai", "India");
const introduceRamesh = introduce.bind(person2);
introduceRamesh("Delhi", "India");

Partial Application with bind()

Code

const introduceFromMumbai = introduce.bind(person1, "Mumbai");
introduceFromMumbai("India"); // "I'm Kuldeep, 25 years old, from Mumbai, India"
const introduceKuldeepFromMumbai = introduce.bind(person1, "Mumbai", "India");
introduceKuldeepFromMumbai(); // "I'm Kuldeep, 25 years old, from Mumbai, India"

Borrowing Methods

Array methods on array-like objects Or using Array.

from (modern).

Code

const numbers = [1, 2, 3, 4, 5];
const arrayLike = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
};
const result = Array.prototype.slice.call(arrayLike);
console.log(result); // [1, 2, 3]
const result2 = Array.from(arrayLike);
console.log(result2); // [1, 2, 3]

Finding Max/Min in Array-like

Modern approach with spread.

Code

const numbers2 = [5, 6, 2, 3, 7];
const max = Math.max.apply(null, numbers2);
console.log(max); // 7
const min = Math.min.apply(null, numbers2);
console.log(min); // 2
const max2 = Math.max(...numbers2);
const min2 = Math.min(...numbers2);

Using bind() for Event Handlers

Without bind, 'this' would be lost button.

handleClick(); // Works const handler = button.

handleClick; handler(); // 'this' is undefined/window With bind.

Code

const button = {
  text: "Click me",
  clickCount: 0,
  handleClick: function() {
    this.clickCount++;
    console.log(`${this.text} clicked ${this.clickCount} times`);
  }
};
const boundHandler = button.handleClick.bind(button);
boundHandler(); // "Click me clicked 1 times"
boundHandler(); // "Click me clicked 2 times"

call() for Constructor Chaining

Code

function Animal(name) {
  this.name = name;
}
function Dog(name, breed) {
  Animal.call(this, name); // Call parent constructor
  this.breed = breed;
}
const dog = new Dog("Buddy", "Golden Retriever");
console.log(dog.name); // "Buddy"
console.log(dog.breed); // "Golden Retriever"

apply() for Variable Arguments

'arguments' is array-like, not real array Modern approach.

Code

function sum() {
  const args = Array.prototype.slice.call(arguments);
  return args.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // 15
function sum2(...args) {
  return args.reduce((acc, num) => acc + num, 0);
}
console.log(sum2(1, 2, 3, 4, 5)); // 15

bind() for Currying

Code

function multiply(a, b, c) {
  return a * b * c;
}
const multiplyBy2 = multiply.bind(null, 2);
console.log(multiplyBy2(3, 4)); // 24 (2 * 3 * 4)
const multiplyBy2And3 = multiply.bind(null, 2, 3);
console.log(multiplyBy2And3(4)); // 24 (2 * 3 * 4)

Custom Implementation

Common Use Cases 1.

Method borrowing 2.

Function composition 3.

Preserving context.

Code

Function.prototype.myCall = function(context, ...args) {
  context = context || globalThis;
  const fnSymbol = Symbol('fn');
  context[fnSymbol] = this;
  const result = context[fnSymbol](...args);
  delete context[fnSymbol];
  return result;
};
Function.prototype.myApply = function(context, args = []) {
  context = context || globalThis;
  const fnSymbol = Symbol('fn');
  context[fnSymbol] = this;
  const result = context[fnSymbol](...args);
  delete context[fnSymbol];
  return result;
};
Function.prototype.myBind = function(context, ...args1) {
  const fn = this;
  return function(...args2) {
    return fn.apply(context, [...args1, ...args2]);
  };
};
const obj1 = { a: 1, b: 2 };
const obj2 = { a: 3, b: 4 };
function add() {
  return this.a + this.b;
}
console.log(add.call(obj1)); // 3
console.log(add.call(obj2)); // 7
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
const addThenMultiply = (a, b, c) => {
  const sum = add.call(null, a, b);
  return multiply.call(null, sum, c);
};
console.log(addThenMultiply(2, 3, 4)); // 20
class Counter {
  constructor() {
    this.count = 0;
  }
  increment() {
    this.count++;
  }
}
const counter = new Counter();
const increment = counter.increment.bind(counter);
increment();
console.log(counter.count); // 1

---

Summary

Understanding callapplybind is essential for mastering javascript. Practice these examples and experiment with variations to deepen your understanding.

Key Takeaways

• callapplybind is a fundamental concept in javascript
• Practice with these examples to build confidence
• Experiment with variations to explore edge cases
• Understanding callapplybind will help you in technical interviews