Call, Bind And Apply in JavaScript
Tags: webdev, javascript, beginners, programming
Published: 2022-06-30 20:19:51

JavaScript is a programming language that enables one to create interactive web pages. It is a client-side scripting language, which means that the code is executed on the user's computer, not on the server.

JavaScript is an object-oriented language, which means that it uses objects to structure code. The language is also prototype-based, meaning that objects can inherit properties and methods from other objects.

In this article, we will discuss three of the most important concepts in JavaScript: `call`, `bind` and `apply`. We will see how these concepts can be used to write better code.

---

### Call

The `call()` method is used to call a function with a given this value and arguments provided individually.

For example, consider the following code:

```jsx
function greet(name) {
return 'Hello, ' + name + '!';
}

console.log(greet('John')); // Hello, John!
console.log(greet('Mary')); // Hello, Mary!
```

As we can see, the `greet()` function is being called with different names. We can use the call() method to call the same function with a different name:

```jsx
console.log(greet.call(null, 'John')); // Hello, John!
console.log(greet.call(null, 'Mary')); // Hello, Mary!
```

As we can see, the `call()` method takes two arguments: the first argument is the value of this, and the second argument is the name that should be used in the greet() function.

The value of this is the object that will be used as the "this" value inside the called function. In the above code, we have passed null as the value of this. This is because the greet() function does not use the this value.

If we want to use the call() method with a function that does use the this value, we need to pass an object as the first argument:

```jsx
function Person(name) {
  this.name = name;
}

Person.prototype.greet = function () {
  return 'Hello, ' + this.name + '!';
};

var john = new Person('John');
console.log(john.greet()); // Hello, John!

var mary = new Person('Mary');
console.log(mary.greet()); // Hello, Mary!
```

As we can see, the Person constructor function creates an object with a name property. The `greet()` method of the Person prototype returns a string that contains the name of the person.

We can use the `call()` method to call the `greet()` method with a different person:

```jsx
console.log(mary.greet.call(john)); // Hello, John!
```

As we can see, the first argument of the `call()` method is the object that will be used as the "this" value inside the `greet()` method. The second argument is the name of the person, which is used in the string that is returned by the `greet()` method.

---

### Bind

The `bind()` method is used to create a new function that has a given this value and arguments provided individually.

For example, consider the following code:

```jsx
function greet(name) {
  return 'Hello, ' + name + '!';
}

console.log(greet('John')); // Hello, John!
console.log(greet('Mary')); // Hello, Mary!
```

As we can see, the `greet()` function is being called with different names. We can use the bind() method to create a new function that is bound to a given name:

```jsx
var greetJohn = greet.bind(null, 'John');
console.log(greetJohn()); // Hello, John!

var greetMary = greet.bind(null, 'Mary');
console.log(greetMary()); // Hello, Mary!
```

As we can see, the `bind()` method takes two arguments: the first argument is the value of this, and the second argument is the name that should be used in the `greet()` function.

The value of this is the object that will be used as the "this" value inside the new function. In the above code, we have passed null as the value of this. This is because the `greet()` function does not use the this value.

If we want to use the `bind()` method with a function that does use the this value, we need to pass an object as the first argument:

```jsx
function Person(name) {
  this.name = name;
}

Person.prototype.greet = function () {
  return 'Hello, ' + this.name + '!';
};

var john = new Person('John');
console.log(john.greet()); // Hello, John!
```

As we can see, the Person constructor function creates an object with a name property. The `greet()` method of the Person prototype returns a string that contains the name of the person.

We can use the `bind()` method to create a new function that is bound to the given person:

```jsx
var greetJohn = john.greet.bind(john);
console.log(greetJohn()); // Hello, John!
```

As we can see, the first argument of the `bind()` method is the object that will be used as the "this" value inside the `greet()` method. The second argument is the name of the person, which is used in the string that is returned by the `greet()` method.

---

### Apply

The `apply()` method is used to call a function with a given this value and an array of arguments.

For example, consider the following code:

```jsx
function greet(name) {
  return 'Hello, ' + name + '!';
}

console.log(greet('John')); // Hello, John!
console.log(greet('Mary')); // Hello, Mary!
```

As we can see, the `greet()` function is being called with different names. We can use the apply() method to call the same function with a different name:

```jsx
console.log(greet.apply(null, ['John'])); // Hello, John!
console.log(greet.apply(null, ['Mary'])); // Hello, Mary!
```

As we can see, the `apply()` method takes two arguments: the first argument is the value of this, and the second argument is an array of arguments that should be used in the `greet()` function.

The value of this is the object that will be used as the "this" value inside the called function. In the above code, we have passed null as the value of this. This is because the `greet()` function does not use the this value.

If we want to use the `apply()` method with a function that does use the this value, we need to pass an object as the first argument:

```jsx
function Person(name) {
  this.name = name;
}

Person.prototype.greet = function () {
  return 'Hello, ' + this.name + '!';
};

var john = new Person('John');
console.log(john.greet()); // Hello, John!
```

As we can see, the Person constructor function creates an object with a name property. The `greet()` method of the Person prototype returns a string that contains the name of the person.

We can use the `apply()` method to call the `greet()` method with a different person:

```jsx
console.log(mary.greet.apply(john, [])); // Hello, John!
```

As we can see, the first argument of the `apply()` method is the object that will be used as the "this" value inside the `greet()` method. The second argument is an array of arguments that are passed to the greet() method. In this case, we have passed an empty array, because the `greet()` method does not take any arguments.

Hope this blog helped you understand call, bind and apply. Good Luck 👍