'this' keyword in JavaScript simple explanation with call(), apply(), bind()
Published: 2021-07-31 12:22:23

# _'this'_


> First write a simple code on your browser console ,
> `console.log(this);`
> wow! You see a window object, right ?! but why?

For discussion, I divided this topic into 4 parts --
* Implicit binding
* Explicit binding
* new binding
* window binding

#### Implicit binding :

```
const student = {
    name: 'Sabbir',
    dept: "CSE",
    namePrint: function(){
        console.log(`My name is ${this.name} Ahmmed`);
    }
}

student.namePrint();
```
from above code we can see that, we are printing name from object using ‘this’ keyword. ‘this’ actually reference a nearest object and that’s why here nearest object is student and inner this object namePrint is a property which is a function and print name of student. So, here ‘this’ holds properties of student

Another,
```
const student = {
    name: 'Sabbir',
    dept: "CSE",
    namePrint: function(){
        console.log(`My name is ${this.name} Ahmmed`);
    },
    student2: {
        name: 'Jubayer',
        dept: "EEE",
        deptPrint: function(){
            console.log(`Department name is ${this.dept}`);
        }
    }
}

student.namePrint();
student.student2.deptPrint();
```
here, student2 is a property of student but student2 itself is an object. So, we know that ‘this’ holds nearest object. That’s why here ‘this.dept’ prints EEE not CSE.

`Simple and bonus Tricks :` look at your calling function deptPrint(), this function is calling using dot(.), before dot(.) you see an object ( student2 ) right ? Yes, for deptPrint function ‘this’ holds student2 properties ! nearest properties ! 

So, can you tell me which object actually reference for namePrint()’s ‘this’ ? `comment please`

#### Explicit binding : Call(), apply(), bind()

`call() :` call method is helper function of this. 'this' keyword by default reference a nearest object. But using call() method we can set that which object we can call for a function. call() can take parameter and 1st is an object and 2nd multiple parameter for function . 
For example : functionName.call(objectName, p1, p2, .... );
```
var printName = function(v1, v2, v3){
    console.log(`${this.name} is ${v1}, ${v2} & ${v3}`);
}

var sabbir = {
    name: "Sabbir",
    dept: "CSE"
};

var v1 = 'good';
var v2 = 'boy';
var v3 = 'in the class';

printName.call(sabbir, v1, v2, v3);
```

`apply():` Same as call() but call() can take parameter individually, On the other hand apply() can take array as a parameter. For example : 
const p = [p1, p2, p3,...]
functionName.apply(objectName, p );
```
var v1 = 'good';
var v2 = 'boy';
var v3 = 'in the class';
const v = [v1, v2, v3]

printName.apply(sabbir, v);
```

`bind():` Same as call() but doesn't call immediately. It stores values in a variable. After that, we have to call that variable as a function. For example : 
const _newFunc_ = printName.bind(sabbir, v1, v2, v3);
_newFunc();_

```
var printName = function(v1, v2, v3){
    console.log(`${this.name} is ${v1}, ${v2} & ${v3}`);
}

var sabbir = {
    name: "Sabbir",
    dept: "CSE"
};

var v1 = 'good';
var v2 = 'boy';
var v3 = 'in the class';

const newFunc = printName.bind(sabbir, v1, v2, v3);
newFunc();

```

#### new binding : 

```
function Student(name, dept){
    // let this = Object.create(null);

    this.name = name;
    this.dept = dept;
    console.log(`${this.name} is now ${this.dept} student.`);
    
    // return this
}

const sabbir = new Student('Sabbir', 'CSE');
```
'new' keyword creates an object and ‘this’ keyword just reference that object’s properties. So, ‘this’ actually holds new Student’s properties.

#### window binding: 

At the beginning , we print ‘this’ keyword that we found a window object. Because, I already told you that ‘this’ actually points to the nearest object, right? so, when ‘this’ does not find any of our custom-defined objects, it points to window object for browser and global object for Nodejs. Because we know that by default every browser has a window object.

_Bonus Tricks :_
* If you confuse about the reference of ‘this’, just do `console.log(this)` and find out its object. 
* You may use `“use strict”` to the beginning of a script or a function.