# "this" keyword in javascript

**this** in js is one of the confusing topics that every js developer comes across in their dev  journey from being to beginner to pro. If you want to become a pro js dev , then you need to have a strong grasp of **this** topic.

So let's start !

so let's start with who is this in js ?

- **this** technically refers to object that the function belongs to.
- The value of **this** depends on how the function is being called , something known as runtime  binding in js 

In simple terms we can say that **this**  refers to the owner of function call. The point to be noted is here that :
-  **this** refers to the owner of function call, Not the function itself.
- The same function can have different owners depending on the different scenarios.

The value of this is based on these 4 rules in js.

### 1. Default Binding
 In the Default binding, this generally refers to global object 
```
//1. default bindings
  function myFunc() {
    console.log("this in default bindings:", this);
    //here this refers to the global object that is 'Window'
  }

  myFunc();
```
### 2. Implicit Binding
Implicit Binding(also known as method invocation) concept in js is applied when we invoke a function in an object using the dot(.) notation.
this in such sitautaion will refer to the object using which that function was invoked.

```
//2. Implicit binding
  function showData() {
    console.log("this in Implicit binding:", this);
    console.log("show my data:", this.name, this.job);
  }

  const obj = {
    name: "karishma",
    job: "react js dev",
    showData: showData
  };

  obj.showData();

  //this in Implicit binding: 
  //obj -> {name: "karishma", job: "react js dev", showData: ƒ showData()}
```
now there are various scenarios of implicit binding.
### 2.1 Nested function
In a nested function, that is you can see here we have a function inside the method of an object. So here in this case the value of **this** depends on the function invocation type and not on the outer function's context.

 ```
//2.1.Nested function
  const obj1 = {
    name: "karishma gajria agarwal",
    job: "react js dev",
    outerFunc: function(){
      function innerFunc(){
        console.log("this in Nested function:",this);
      }
      innerFunc();
      //here innerFunc()is called using default binding, so here this refers to the window object. 
    }
  };

  obj1.outerFunc();
  //here outerFunc() is called using implicit binding
```
### 2.2 Method that is separated from an object
As you can see the code below 

```
//2.2.Method that is separated from an object.
  function showMyData(){
    console.log("this in Method that is separated from an object refers to:", this)

  }

  const obj2 = {
      name: "karishma gajria agarwal",
      job: "react js dev",
      showMyData: showMyData
    };

    const newFunc = obj2.showMyData;
    //here, we are copying an object method to a new variable, here we are creating a refernce to the function
    newFunc();
    //In this scenario , this refers to window object, as newFunc() directly refers to function - showMyData
```
### 3.Explicit Binding
In Explicit binding( also known as indirect invocation).Here we can force a function to use a certain object as its **this**.
Explicit binding can be acheived using :
- call()
- apply()
- bind()

 ```
//3.Explicit binding
  function showUserData(yoe,country) {
    console.log("this in Explicit binding refers to:", this); 
    console.log(`${this.name} is ${this.profile} having ${yoe} years of experience, lives in ${country}.`);
  }

  const user1 = {
    name: "karishma",
    profile: "react js dev"
  };

  const user2 = {
    name: "Ema",
    profile: "HR"
  };

  const user3 = {
    name: "John",
    profile: "Backend dev"
  };

 showUserData.call(user1, '1.5', 'India');
//  this in Explicit binding refers to: 
//  {name: "karishma", profile: "react js dev"}
//  karishma is react js dev having 1.5 years of experience, lives in India. 

 showUserData.apply(user2, ['2', 'Singapore']);
// this in Explicit binding refers to: 
// {name: "Ema", profile: "HR"}
// Ema is HR having 2 years of experience, lives in Singapore. 

 //using bind(), we can create a new function with fixed this
 const user3Info = showUserData.bind(user3) ;
 user3Info("4","China");
// this in Explicit binding refers to: 
// {name: "John", profile: "Backend dev"}
// John is Backend dev having 4 years of experience, lives in China.
```
### 3.New Binding
New binding in Js, also known as Constructor invocation is applied when we create an object using Function constructors.

```
//4.New Bindings
function myOuterFunction(){
  this.name = "Ema";
  this.myInnerFunction = function(){
    console.log("this in New binding refers to:",this);
  };
}

  const myObj = new myOuterFunction();
  myObj.myInnerFunction();

//   this in New binding refers to: 
// myOuterFunction {name: "Ema", myInnerFunction: ƒ (), constructor: Object}
```

So , In conclusion , we can say that
1. The value of **this** in js,  depends on type of function invocation .
2. In default binding, **this**, refers to Window object
3. In Implicit binding, **this**, refers to object on the Left hand side of dot(.) notation.
4. In Explicit binding, **this**, refers to object passed as 1st paramter in call(), apply() and bind() method.
5. In New binding, **this**, refers to Left hand side object in the function call.

**Code sandbox link :** [https://codesandbox.io/s/this-keyword-forked-rocts7](Link)