This keyword in Javascript
Tags: javascript, webdev, codenewbie
Published: 2021-06-15 09:32:50

The **this** keyword in javascript behaves a bit differently than other languages. That is why it confuses a lot of people. If you are one of them, then this post is a great start for you to know about it.

**So what is this and what is its value?**

This is a property of an execution context (global, function, or eval) that, in non–strict mode, is always a reference to an object and in strict mode can be any value.

In most cases, the value of this is determined by how a function is called(runtime binding). It can't be set by assignment during execution, and it may be different each time the function is called. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qios6weoqgy8dsmhlym.png )

Let’s now see what is the value of this in different contexts - 

###Global Context###

In the global execution context (outside of any function), **this** refers to the global object whether in strict mode or not.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqkgwtycsq5k1lnw10s4.png)

###Function Context###
For Functions, the value of **this** is determined by how they are called.

For functions called directly without setting the value of this, **this** defaults to the global object, which in the browser is the window object.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tbyogf2pg561mt5vejkw.png)

However, in strict mode, the value of **this** is set to undefined if it is not set while entering an execution context.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aw4i2vmn39zswphokcm3.png)

###Calling a function with a particular value of this###
We can call a function with a specific **this** value using the call and apply method.

**Call()**
The call() method calls a function with a given **this** value and arguments provided individually.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxguibbz3hqkkhrdx34o.png)

**Apply()**
The call() method calls a function with a given **this** value and arguments provided as an array.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c7cvhuwlz4g3f2wmelm3.png)

**Bind()**
The bind method creates a new function with the same body and scope as the function on which it is called, but **this** of the new function is permanently bound to the first argument of the bind method.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nek5gjsinoa1ldgpzr38.png)

###Arrow Functions###

In arrow functions, the value of **this** is equal to the enclosing lexical context’s **this** value. So, In global code, it will be set to the global object.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mssxrqxiqlhaxa7pv7db.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56itksqj2y7qz9y8xdxo.png)

**Note:** We cannot set this value of arrow functions even using call, apply and bind methods.

###As an object method###
When a function is called as a method of an object, its **this** is set to the object the method is called on.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s43qaujsxrda7jc11ayb.png)

I hope this post gives you a fair amount of idea about how **this** works in JavaScript.