DEV Community

loading...
Cover image for ABC of JavaScript

ABC of JavaScript

rahxuls profile image Rahul ・2 min read

The next must-read blog post after learning this in JavaScript.

  • 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
Enter fullscreen mode Exit fullscreen mode

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. 
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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🏄‍♂️

More:

Get weekly newsletter of amazing articles I posted this week and some offers or announcement. Subscribe from Here

Discussion (1)

pic
Editor guide
Collapse
epresas profile image
epresas

Great work! Well explained and to the point... The only thing I noticed is that in the snippet for the bind method you're not binding the context to the function.
Keep up the good work