How to use Call, Apply and Bind methods in javascript
2023-05-12
javascriptweb-developmentprogrammingIn this article, we'll look at what call, apply, and bind methods are in javascript and why they exist.Before we jump in, we need to know what this is in javascript, in this post you can go a little deeper.Call, Apply and BindIn Javascript, all functions will have access to a special keyword called this, the value of this will point to the object on which that function is executed.What are these call, apply and bind methods?To put it in a simple way, all these methods are used to change the value of this inside a function.Let us understand each method in detail.call()Using the call method, we can invoke a function, passing a value that will be treated as this within it.const obj = {
myName: "khriztianmoreno",
printName: function () {
console.log(this.myName);
},
};
obj.printName(); // khriztianmoreno
const newObj = {
myName: "mafeserna",
};
obj.printName.call(newObj); //mafesernaIn the above example, we are invoking the call method in the printName function by passing newObj as a parameter, so now this inside printName points to newObj, hence this.myName prints mafeserna.How to pass arguments to functions?The first argument of the call method is the value pointed to by this inside the function, to pass additional arguments to that function, we can start passing it from the second argument of the call method.function foo(param1, param2) {}
foo.call(thisObj, arg1, arg2);where:foo is the function we are calling by passing the new this value which is thisObjarg1, arg2 are the additional arguments that the foo function will take ( param1= arg1 , param2 = arg2 )apply()The apply function is very similar to the call function. The only difference between call and apply is the difference in how the arguments are passed.call — we pass arguments as individual values, starting from the second argumentapply — additional arguments will be passed as an arrayfunction sayHello(greet, msg) {
console.log(`${greet} ${this.name} ! ${msg}`);
}
const obj = {
name: "khriztianmoreno",
};
// Call
sayHello.call(obj, "Hello", "Good Morning");
// Hello khriztianmoreno ! Good Morning
// Apply
sayHello.apply(obj, ["Hello", "Good Morning"]);
// Hello khriztianmoreno ! Good MorningIn the above example, both the call and apply methods in the sayHello function are doing the same thing, the only difference is how we are passing additional arguments.bind()Unlike the call and apply methods, bind will not invoke the function directly, but will change the this value inside the function and return the modified function instance.We can invoke the returned function later.function sayHello() {
console.log(this.name);
}
const obj = { name: "khriztianmoreno" };
// it won't invoke, it just returns back the new function instance
const newFunc = sayHello.bind(obj);
newFunc(); // khriztianmorenopassing additional arguments:
Passing additional arguments in bind works similarly to the call method, we can pass additional arguments as individual values starting from the second argument of the bind method.function sayHello(greet) {
console.log(`${greet} ${this.name}`);
}
const obj = { name: "khriztianmoreno" };
const newFunc = sayHello.bind(obj, "Hello");
newFunc(); // Hello khriztianmorenoIn case of bind method, we can pass additional arguments in two ways:While calling the bind method itself, we can pass additional arguments along with the value of this to that function.Another way is that we can pass additional arguments while invoking the return function of the bind method.We can follow any of the above ways and it works similarly without any difference in functionality.function sayHello(greet) {
console.log(`${greet} ${this.name}`);
}
const obj = { name: "khriztianmoreno" };
const newFunc1 = sayHello.bind(obj, "Hello");
newFunc1(); // Hello khriztianmoreno
const newFunc2 = sayHello.bind(obj);
newFunc2("Hello"); // Hello khriztianmorenoNOTE: if we don't pass any value or we pass null while calling call, apply, bind methods, then this inner calling function will point to the global object.function sayHello() {
// executing in browser env
console.log(this === window);
}
sayHello.call(null); // true
sayHello.apply(); // true
sayHello.bind()(); // trueWe cannot use call, apply and bind methods in arrow functions to change the value of this, because arrow functions do not have their own this context.The this inside the arrow function will point to the outer/parent function in which it is present.Therefore, applying these methods in the arrow function will have no effect.That's all folks! I hope this article helped you understand what call(), apply() and bind() methods are in javascript!Profile@khriztianmoren