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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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 👍
Top comments (0)