JavaScript call, bind and apply method usages.
Tags: javascript, webdev, programming, tutorial
Published: 2024-05-02 08:53:23

Hello JavaScript developers! Today, we are going to delve into the fascinating world of function methods: `call()`, `apply()`, and `bind()`. These methods are incredibly powerful tools that allow us to manipulate the execution context and parameters of functions. So, let's dive in!

First up, we have the `call()` method. This method allows us to invoke a function with a specified `this` value and individual arguments passed in as comma-separated values. One real-world scenario where we might use `call()` is when we want to borrow a method from one object and use it on another object.

Let's imagine we have two objects: `person1` and `person2`, both having a `greet()` method. However, we want to use `person1`'s `greet()` method on `person2`. We can achieve this using `call()`:

```javascript
const person1 = {
  name: "Alice",
  greet: function(message) {
    console.log(`${this.name} says: ${message}`);
  }
};

const person2 = {
  name: "Bob"
};

person1.greet.call(person2, "Hello there!"); // Output: Bob says: Hello there!
```

Here, we use `call()` to invoke `person1`'s `greet()` method, but with `person2` as the `this` value. As a result, `person2` is able to borrow `person1`'s method, and we get the desired output.

Next, we have the `apply()` method. Similar to `call()`, `apply()` allows us to invoke a function with a specified `this` value, but it takes arguments as an array. This can come in handy when we have an unknown number of arguments or want to pass an array of values as arguments.

Let's say we have a function `getTotal()` that calculates the sum of all the numbers passed as arguments. We can use `apply()` to pass an array of numbers as arguments:

```javascript
function getTotal() {
  let sum = 0;
  for (let i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  return sum;
}

const numbers = [1, 2, 3, 4, 5];

const result = getTotal.apply(null, numbers);
console.log(result); // Output: 15
```

In this example, we use `apply()` to pass the `numbers` array as arguments to the `getTotal()` function. The `null` argument is used as the `this` value (since `getTotal()` doesn't rely on any specific object context). As a result, we get the sum of all the numbers in the array.

Lastly, we have the `bind()` method. Unlike `call()` and `apply()`, which immediately invoke the function, `bind()` creates a new function with a specified `this` value and any additional arguments pre-set. This can be useful when we want to create a function with certain parameters already defined.

Let's say we have a function `calculateArea()` that calculates the area of a rectangle. We can use `bind()` to create a new function with a fixed width value:

```javascript
function calculateArea(width, height) {
  return width * height;
}

const calculateRectangleArea = calculateArea.bind(null, 10); // width is set to 10

console.log(calculateRectangleArea(5)); // Output: 50
```

In this example, we use `bind()` to create a new function `calculateRectangleArea` with the `width` parameter pre-set to 10. When we invoke `calculateRectangleArea(5)`, the `height` parameter is passed as 5, and we get the area of the rectangle as the output.

That's it for today's exploration of `call()`, `apply()`, and `bind()`. These methods are powerful tools in our JavaScript toolkit, allowing us to manipulate function execution in various real-world scenarios. So go ahead, experiment with them, and take your JavaScript skills to the next level!

**Follow me in [X/Twitter](https://twitter.com/ashsajal1)**

Happy coding!