In this tutorial, we will see how to bind function in JavaScript using the Bind() method with and without parameters thought multiples examples step by step.
Note that we can also bind a function in typescript in Angular using the same concept.
When we code using JavaScript, the famous keyword “this” could be sticky if we don’t know its background rules, your code may be working but without knowing why it is working !!
When we want to bind a function in JavaScript, we need to master the concept of the keyword “this”.
That’s the point of this tutorial, we will see the basic rules of “this” then we will see how to bind a function in JavaScript with and without parameters, and also we will check haw to use the functions Call() and apply().
Bind function in JavaScript : Understand the rules of “this” First !
- We use “this” to refer to the current object
- We use “this” to use the functions that exist in the object
- Finally we could use “this” to get the window Object ( if strict mode is not used , we will see that in other tutorial )
var webSite = {
title: "XperTuto",
url: "xpertuto.com",
registrationYear: "2020"
getData: function(){
console.log(this.title + " : " + this.registrationYear);
}
}
This code will work normally without problem as long as we use it through it’s instance
Website.getData(); // Output --> XperTuto : 2020
But what happens if we want to pick the function from outside the object like this ?
Var tempWebsiteData = website.getData();
tempWebsiteData (); // error
this code will call the function but we will have an error when it try to use the key word “this”, because it’s out of the scope and it’s unknown from the outside so it will not recognize the function getData().
How to bind function in JavaScript using the bind() method ?
In JavaScript and more precisely in ECMAScript 5, we can use the bind() method in every function of our Class.
Var webSiteData = website.getData.bind(webSite);
webSiteData(); // Output --> XperTuto : 2020
The bind() method enable us to borrow the function and the instance of the object in the parameter, so we will call the function with “this” of the object.
How to bind function in javascript using Parametres ?
The bind() method enable us to pass parameters to the function so easily.
Let’s use the same previous example with adding a parameter to the function and let’s check how to use the bind() method to call the function.
var webSite = {
title: "XperTuto",
url: "xpertuto.com",
registrationYear: "2020"
getData: function(webSiteType){
console.log(this.title + " : " + this.registrationYear + “:” + webSiteType);
}
}
Var webSiteData = website.getData.bind(website,”Coding_Tutorials”);
webSiteData(); // Output ---> XperTuto : 2020 : Coding_Tutorials
Bonus : How to use call() and apply() methods
As we saw in the previous parts of this tutorial , we use the bind() method to bind a function in JavaScript when the function is not located in the global concept, otherwise we could use the methods call() and apply() to call our function.
In this example, the function is outside the class, and it’s located in the global concept
var webSite = {
title: "XperTuto",
url: "xpertuto.com",
registrationYear: "2020"
}
getData: function(webSiteType){
console.log(this.title + " : " + this.registrationYear + “:” + webSiteType);
}
We can use the call() or apply methods like this :
getData.apply(webSite, ["XperTuto_Tutorial"]);
// OR //
getData.call(webSite, "XperTuto_Tutorial");
// Output ---> XperTuto : 2020 : XperTuto_Tutorial
Note that when we use the apply function, we should pass the parameter in an array event if we have only one parameter.
In this tutorial we have leaned when and how to use the bind() method to bind function in JavaScript, also we have seen haw to call a function that located in the global concept of our application using Call() and apply().
I hope you enjoy reading this Tutorial.