this keyword in javascript
Tags: javascript, beginners, webdev
Published: 2022-05-07 11:06:14

### Introduction :-
One of the most confusing topics in **javascript** 
so to access the object, a method can use this keyword.
unlike other programming language javascript, this keyword behaves differently, It can be used in any function, even if it’s not a method of an object.


#### this keyword
use of this keyword 
```javascript
const user = {
  name: 'hero',
  age: 21,
  data() {
    console.log('user name', this.name)
    console.log("user age", this.age)
  }
}
user.data()
// user name hero
// user age 21
```
> looks easy right

![this keyword](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x7u7znx9fotit1a8jo3g.png)



In javascript, the value of this does not refer to the function which is used or its scope 
it refers to value by the invocation context of function and where it is called.




#### Binding is important to understand 'this' keyword
* Default Binding:
* Implicite binding
* Explicit binding
* New operator method



### Default binding
```javascript
const myFunction = function() {
   console.log(this);
}

myFunction();    // Window
```

as we call function() in the window context it will refer to the window object

```javascript
var myFunction = function() {
   console.log(this.a);
}
var a = 200
myFunction();    // 200
```

above function, this refers to the global context and return 200 its only work if we use var because it hosts in global context.


### Implicite binding

```javascript
function foo(){
	console.log(this.a);
}

var obj = {
	a:2,
	foo:foo
};

obj.foo();  // 2 
```

as you see obj.foo() will refer to object obj and return 2


```javascript
function foo(){
	console.log(this.a);
}

var obj = {
	a:2,
	foo:foo
};

var fun = obj.foo; 
fun() //undefined
```

if we assign obj.foo to var then it will refer to the function itself


### Explicit binding
if we want to call a function using any particular object there we use explicit binding.


we can use call, bind, and apply
```javascript
const obj = {
 name:'hero',
  age:21
}

function foo (){
console.log('user name', this.name)
    console.log("user age", this.age)
}

foo.call(obj)
// user name hero
// user age 21
```


**call** use to so explicitly say to a function what object it should use for this

**apply** method works same as call the only difference between call and apply is in apply function arguments passed as an array.
`function.call(obj, arg1, arg2)`
`function.apply(obj, [arg1], [arg2])`



**bind** use create a new function that will act as an original function but with this predefined

```javascript
function foo(){
	console.log(this.a);
}

var obj = {
	a:2,
	foo:foo
};

var fun = foo.bind(obj); 
fun() //2
```
### New operator method
The new operator lets us create an instance of a user-defined object type or one of the built-in object types that have a constructor function.

` const newObj = new Car('toyota','nissan','honda') `

* Creates a blank, plain JavaScript object.
* A new empty object is created and refer by this keyword.
* Properties and methods are added to the object referenced by this.

```javascript
function Car(carOne, carTwo, carThree) {
  this.carOne = carOne;
  this.carTwo = carTwo;
  this.carThree = carThree;
}

const newObj = new Car('toyota','nissan','honda')

console.log(newObj.carTwo);  //nissan
```

**new operator has the highest priority than explicit binding and implicit binding. The lowest priority has default binding.**

### Arrow function for 🥶this
`const arrowFun = ()=> console.log('this will not bind')`



![javascript binding](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2d30ah62g6rgy9vw5a6.gif)

yes 😂
because the arrow function does not have there own binding. arrow function can't use **this** **argument** methods
```javascript
const obj = {
  name: 'harshit'
}
const fun = () => {
  console.log(this.name)
}

fun.call(obj) // <empty string>
```
arrow function don't have access to new.target
Arrow functions aren't suitable for call, apply and bind methods, which generally rely on establishing a scope.

thank you for reading