Back to: JavaScript Tutorial For Beginners and Professionals
Explicit Function Binding in JavaScript
In this article, I am going to discuss Explicit Function Binding in JavaScript with Examples. Please read our previous article where we discussed JavaScript this keyword with Examples. At the end of this article, you will understand what is Explicit Function Binding in JavaScript and when and how to use Explicit Function Binding in JavaScript with examples.
Explicit Function Binding in JavaScript
The call() and apply() methods are predefined JavaScript methods. This we already have discussed in the Deep Dive into Function and Function Expressions chapter. Let us summarize once again.
JavaScript Call() Method
Syntax: functionName.call(thisArg, arg1, arg2, …);
The call() method invokes a function by function Name with a specified this value and arguments. call() method doesn’t return a new function, it returns the result of the function call. The first argument of the call() method thisArg is the value of this. It allows you to set this value with any given object.
The rest arguments of the call() method arg1, arg2,… are the arguments of the function. When we call the function, the JavaScript engine invokes the call() method of that function object.
Example: JavaScript call() Method
<html> <head> <title>JavaScript call() method example</title> </head> <body> <script> //Object constructor syntax const person = { name: 'Angel' }; function greet(age, bloodgroup) { return `Welcome ${this.name} your age is ${age} and bloodgroup is ${bloodgroup}.`; } console.log(greet.call(person, 15, 'B+')); </script> </body> </html>
Output: Press F12 and go to the Console section
In the above example, the call is called on the greet() function with the person as this value and 15, B+ as the argument. The greet() function is immediately invoked and logs Welcome Angel your age is 15 and the blood group is B+ to the console.
JavaScript apply() Method
The Function.apply() method allows you to execute a function with given this value and arguments passed as an array.
Syntax: functionName.apply(thisArg, [args]);
- The apply() method accepts two arguments:
- The thisArg is the value provided when the function functionName is called.
The args is an array containing the arguments of the function fn. Since the ES5, the args argument can be either an array-like object or an array object.
Note: The apply() method is similar to the call() method except that it accepts the arguments of the function as an array rather than individual arguments.
The call() & apply() methods both can be used to call a method with a different object as an argument.
Example: JavaScript call() and apply() method
<html> <head> <title>call() and apply method example</title> </head> <body> <script> var emp_address = { fullAddress: function () { return this.company + " " + this.city + " " + this.state; } } var address = { company: "JavaScript Tutorial by Shagufta", city: "Mumbai", state: "MH", } document.writeln("call method: " + emp_address.fullAddress.call(address)); document.writeln("<br/>apply method: "+emp_address.fullAddress.apply(address)); </script> </body> </html>
Output:
JavaScript Bind() Method
The bind() method was introduced in ECMAScript 5. It creates a new function, and when called it has this keyword which refers to the provided value, with a given sequence of arguments. The new function is returned and can be invoked later, as many times as required, with this value and any remaining arguments.
Syntax: functionName.bind(thisArg[, arg1[, arg2[, …]]])
The bind() method returns a copy of the function functionName with the specific this value (thisArg) and arguments (arg1, arg2, …). Unlike the call() and apply() methods, the bind() method doesn’t execute the function immediately. It only returns the function. The bind() method allows an object to take a method from another object without making a copy of that method. This is called function borrowing in JavaScript.
Example1: JavaScript bind() Method
<html> <head> <title>bind() method example1</title> </head> <body> <script> let running = { name: 'Running', run: function (speed) { document.write(this.name + ' runs at ' + speed + ' mph.'); } }; let flying = { name: 'Flying', fly: function (speed) { document.write(this.name + ' flies at ' + speed + ' mph.'); } }; let run = running.run.bind(flying, 20); run(); </script> </body> </html>
Output: Flying runs at 20 mph.
Example: JavaScript bind() method
<html> <head> <title>JavaScript bind() method example2</title> </head> <body> <script> //Object constructor syntax const person = { name: 'Angel', }; function greet(age, bloodgroup) { return `Welcome ${this.name} your age is ${age} and bloodgroup is ${bloodgroup}.`; } const bindGreet = greet.bind(person, 15, 'B+'); console.log(bindGreet()); </script> </body> </html>
Output: Press F12 and go to the Console section
Understanding Bind() and Call() Methods in JavaScript
In JavaScript, the bind and call methods are used to set this keyword value of a function. this value determines the context in which a function is executed and can be used to access the properties and methods of an object. Both bind and call are used to set this value, but they have some differences in their usage and behavior.
Differences Between bind() and call() Methods in JavaScript
The main difference between bind and call is how they set this value for a function. Bind creates a new function with the specified this value and any partially applied arguments, while call immediately invokes the function with the specified this value and any arguments passed in.
Another difference is that bind returns a new function that can be invoked later, while the call returns the result of the function call.
In general, bind is used when you need to create a function with a specific this value and arguments, which can be invoked later. The Call is used when you need to immediately invoke a function with a specific this value and arguments.
The bind and call methods are important tools for setting this value in JavaScript. Understanding the differences between these methods and when to use them can greatly improve your code and make it more readable and maintainable.
Here, in this article, I try to explain Explicit Function Binding in JavaScript with Examples. I hope you enjoy this Explicit Function Binding in the JavaScript article. I would like to have your feedback. Please post your feedback, question, or comments about this article.