ABC of JavaScript
Tags: webdev, javascript, programming, codenewbie
Published: 2021-02-06 03:55:07


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...

```javascript
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...

```javascript
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

```javascript
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

```javascript
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()

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

More: 
-  [You don't know 'this' in JavaScript](https://blog.rahulism.co/you-dont-know-this-in-javascript) 


Get weekly newsletter of amazing articles I posted this week and some offers or announcement. Subscribe from <a href="https://mailchi.mp/9f73b65b9c38/rahulism" target="_blank">Here</a>

<a href="https://www.buymeacoffee.com/rahxuls" target="_blank"> <img src="https://res.cloudinary.com/rahulism1/image/upload/v1608182430/bmc_nbxakd.png"></a>