paint-brush
The ABCs of JavaScript: apply, bind, and callby@rahull
857 reads
857 reads

The ABCs of JavaScript: apply, bind, and call

by RahulFebruary 6th, 2021
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

The ABCs of JavaScript: apply, bind, call, and call - the ABC of JavaScript. The ABC of Javascript is called 'A - apply (B) - bind() - call (C) The ABC is used to set what 'this' should refer to, irrespective of how or where the function gets called. We can borrow or use the functionality of the ABCs to efficiently utilize objects. This is known as Function Borrowing, used to efficiently use objects. It can be set to any value in the object which is being passed, such as 'Rahul' or 'greet'

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - The ABCs of JavaScript: apply, bind, and call
Rahul HackerNoon profile picture

The ABCs of Javascript are:

  • A - apply()
  • B - bind()
  • C - call()

Using them, we can set what 'this' should refer to, irrespective of
how or where the function gets called. Let's see what would happen in
case of an object.

showName
method is being called through its owner object student, as shown below...

const student = {
    name: "Rahul", 
    showName: function(){
        console.log(this.name); 
    }
}

student.showName(); //Rahul

Hence, 'this' used inside the function will refer to the student object. What if we assign the

showName 
function to a global scoped variable
greetStudent
, and then call it as below...

const student = {
    name: "Rahul", 
    showName: function(){
        console.log(this.name); 
    }
}

const greetStudent = student.showName; 

greetStudent(); 
//Does not print Anything
// 'this' refers to global object now
// because greetStudent is global, and hence student.showName is being called globally.

The reference to 'this' changes to the global object, & this can cause unwanted and hard to spot bugs.

To set 'this', we use the ABC of JavaScript.

We can borrow or use the functionality of

showName 
method, without having to

  • Make its copy
  • keep separately for different objects

This is known as Function Borrowing, used to efficiently utilize objects.

call() method

const student = {
    name: "Rahul", 
    showName: function(friend1, friend2){
        console.log(this.name); 
        console.log(friend1); 
        console.log(friend2); 
    }
}

student.showName.call({name: "Rahul" },"John", "Jane"); 
// Rahul
// John
// Jane

The call() method sets the reference to 'this' to the owner
object. It can be set to any value in the object which is being passed.
(Arguments can be passed as well)

apply() method

const student = {
    name: "Rahul", 
    showName: function(friend1, friend2){
        console.log(this.name); 
        console.log(friend1); 
        console.log(friend2); 
    }
}

student.showName.apply({name: "Rahul" },["John", "Jane"]); 
// Rahul
// John
// Jane

apply()
method is used in the same was as
 call()
, except that it accepts arguments in array form.

bind()

const student = {
    name: "Rahul", 
    showName: function(){
        console.log(this.name); 
    }
}

const greetStudent = student.showName({
    name: "Rahul from Bind"
}) 

greetStudent(); // Rahul from Bind

bind() 
method used in the same way as to
call()
, except that it returns a copy of the function, which can be invoked later. Even when
greetStudent 
is globally scoped, the reference to 'this' is still set to the student object.

🥂Thanks For Reading | Happy Learning🏄‍♂️

You can get my weekly newsletter of amazing articles I posted this week and some offers or announcement by subscribing to my newsletter here.