JavaScript - Bind, Call, and Apply

What are they?

In JavaScript, bind(), call(), and apply() are methods that allow you to control the execution context of a function. They provide ways to explicitly set the value of this within a function and optionally pass arguments to the function. These methods are commonly used when you need to define the context in which a function should be executed or when you want to borrow methods from one object and apply them to another. By utilizing bind(), call(), and apply(), you have more flexibility in managing the behavior and invocation of functions in your JavaScript code.

bind()

The bind() method creates a new function that, when called, has this keyword set to a specified value. It returns a new function with the bound this value, which can be called later. The bind() method does not immediately execute the function. It allows you to curry functions (pre-set some arguments) or create a new function with a specific context.

const obj = {
  name: 'Zephyr',
  sayHello: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

const hello = obj.sayHello.bind(obj);
hello(); // Output: Hello, Zephyr!

It also can be used for function currying.

function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);

console.log(double(4)) // Output: 8

Or used for event handling.

<button>click me</button>
<button>Stop click me</button>

const buttons = document.querySelectorAll("button");

const handleClick = function () {
    console.log(`Button "${this.textContent}" clicked!`);
};

buttons.forEach((button) => {
    button.addEventListener("click", handleClick.bind(button));
});

// either Button "Click me" clicked
// or Button "Stop click me" clicked 
// in the console

Alternatively, you can check out this codepen.io/victoriacheng15/pen/PoxKEqN to see how it works. Feel free to change the text content for these buttons.

call()

The call() method calls a function with a given this value and arguments provided individually. It immediately executes the function with the specified context (this value) and any additional arguments passed individually.

const obj1 = {
  name: 'Zephyr'
};

function sayHello() {
  console.log(`Hello, ${this.name}!`);
}

sayHello.call(obj1); // Output: Hello, Zephyr!

It also can be used to borrow functions from another object.

const obj2 = {
  name: 'Victor'
};

sayHello.call(obj2); // Output: Hello, Victor!

Or function chaining…

const calculator = {
  value: 0,
  add: function(num) {
    this.value += num;
    return this;
  },
  multiply: function(num) {
    this.value *= num;
    return this;
  },
  getValue: function() {
    return this.value;
  }
};

const result = calculator.add(5).multiply(3).getValue();
console.log(result); // Output: 15

apply()

The apply() method is similar to call(), but it takes arguments as an array. It calls a function with a given this value and an array of arguments. Like call(), it immediately executes the function with the specified context and arguments.

const numbers = [5, 6, 2, 3, 7];

const max = Math.max.apply(null, numbers);

console.log(max); // Expected output: 7

const min = Math.min.apply(null, numbers);

console.log(min); // Expected output: 2

Or you need to pass dynamic arguments…

function sum(a, b, c) {
    return a + b + c
}

// or

function sum(...args) {
  return [...args].reduce((acc, curr) => acc + curr, 0);
}

const numbers = [1, 2, 3];
const result = sum.apply(null, numbers);
console.log(result); // Output: 10

Recap

bind(), call(), and apply() are JavaScript methods that allow you to control the execution context of a function. They enable you to set the this value explicitly and pass arguments to the function. These methods provide flexibility in managing function invocation and context manipulation in JavaScript.

Additionally, call() and apply() are similar, but one difference is that call() takes in a comma-separated argument while apply() takes in an array of arguments. An easy way to remember, “c” for call and comma-separated and “a” for apply and array.

Resources

Thank you!

Thank you for your time and for reading this!

Originally published at victoriacheng15.vercel.app