Understanding Call, Apply, and Bind: Essential Methods in JavaScript
Tags: javascript, frontend, webdev, beginners
Published: 2023-05-16 08:20:55

---
title: Understanding Call, Apply, and Bind: Essential Methods in JavaScript
published: true
series: Javascript core concepts
date: 2023-04-24 14:58:42 UTC
tags: #javascript #frontend #webdev #beginners
canonical_url: 
---
![Understanding Call, Apply, and Bind: Essential Methods in JavaScript
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g90z1rvz7y5wesnyqz9b.png)

<mark>A most asked javascript Interview question.</mark>

JavaScript provides three methods for manipulating the `this` keyword in functions: `call()`, `apply()`, and `bind()`. These methods allow you to change the context of the `this` keyword, which can be useful for controlling the behaviour of functions. In this blog post, we will explore how these methods work and provide examples of their usage.

### **call(); (Call Method)**

The `call()` method allows you to call a function with a specified `this` value and arguments provided individually. The first argument to `call()` sets the `this` value for the function being called, and the remaining arguments are passed to the function as arguments.

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

let person = {
  name: "John"
};

greet.call(person, "Alice"); // Output: Hello, Alice! My name is John.

```
In this example, we define a `greet()` function that expects a `name` parameter. We also define a `person` object with a `name` property. We then call the `greet()` function with the `call()` method, passing in the `person` object as the `this` value and `"Alice"` as the `name` argument. As simple as that! Just call a method with `call()` and provide specific context `this` as per your choice.

### **apply(); (Apply Method)**

The `apply()` method is similar to the `call()` method, but it takes an array of arguments instead of individual arguments. The first argument to `apply()` sets the `this` value for the function being called, and the second argument is an array of arguments to pass to the function.

```
function add(a, b) {
  return a + b;
}

let numbers = [1, 2];

console.log(add.apply(null, numbers)); // Output: 3

```

In this example, we define an `add()` function that takes two parameters. We also define an array of numbers `[1, 2]`. We then call the `add()` function with the `apply()` method, passing in `null` as the `this` value and `numbers` as the array of arguments.

### **bind(); (Bind Method)**

The `bind()` method returns a new function with a specified `this` value and any arguments that are passed to it. The `bind()` method does not call the function immediately but instead returns a new function that can be called later.

```
let person = {
  name: "John",
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

let greetPerson = person.greet.bind(person);

greetPerson(); // Output: Hello, my name is John.

```

In this example, we define a `person` object with a `name` property and a `greet()` method that logs a greeting to the console. We then use the `bind()` method to create a new function `greetPerson` with the `person` object as the `this` value. We can then call the `greetPerson()` function to log the greeting.

## Advantages

These methods offer several advantages over other techniques for controlling the behaviour of functions, including:

### **1. Explicitly setting the** `this` keyword

In JavaScript, the value of the `this` keyword is determined by how a function is called. By using the `call()`, `apply()`, and `bind()` methods, you can explicitly set the value of the `this` keyword, regardless of how the function is called. This can be especially useful when working with complex code structures, where the value of `this` may change depending on how functions are nested and called.

### **2. Flexibility in passing arguments**

The `call()` and `apply()` methods allow you to pass arguments to a function in a flexible way. For example, you can pass arguments as an array using the `apply()` method, which can be useful when working with functions that take a variable number of arguments. This can make your code more flexible and easier to work with.

### **3. Creating new functions with predefined arguments**

The `bind()` method allows you to create a new function with a predefined `this` value and any arguments that are passed to it. This can be useful when you want to create a new function with a specific context or set of arguments. The new function can then be used in place of the original function, without having to redefine the `this` value or arguments each time.

### **4. Avoiding repetition of code**

By using the `call()`, `apply()`, and `bind()` methods, you can avoid repeating code that sets the `this` value or passes arguments to a function. Instead, you can create a single function that accepts a `this` value and arguments, and then use the `call()`, `apply()`, or `bind()` methods to invoke the function with the correct context and arguments. This can save you time and reduce the amount of code you need to write.

## Summary

In summary, the `call()`, `apply()`, and `bind()` methods allow you to manipulate the `this` keyword in JavaScript functions. The `call()` and `apply()` methods are used to immediately invoke a function with a specified `this` value and arguments, while the `bind()` method returns a new function with a specified `this` value that can be called later. These methods are powerful tools for controlling the behaviour of functions in JavaScript and offer flexibility, code reusability, and can make your code easier to read and maintain.