What is "This"? a JavaScript Explanation
Tags: javascript, beginners, codenewbie
Published: 2020-08-07 06:33:20

We all have used `this` inside a function just to find out that it's not working as thought. Do you want to understand what happens? Let me explain it to you:

[W3School](https://www.w3schools.com/js/js_this.asp#:~:text=The%20JavaScript%20this%20keyword%20refers%20to%20the%20object%20it%20belongs%20to.&text=Alone%2C%20this%20refers%20to%20the,strict%20mode%2C%20this%20is%20undefined%20.) defines `this` as  "... *The keyword that refers to the object it belongs to".* Certainly, the definition is kind of confusing. Let's start by remembering that in JavaScript anything that is not a primitive type is an object. So, `this` is a keyword that you can use to refer to a particular object. 

The tricky part is to know what object `this` belongs to. It's simpler to think of `this` as the reference to the object that is executing that block of code.

## Standard Behavior of `this`

By default, `this` will refer to the global object. In frontend JavaScript, this object is the `window`. `this` will only change its reference in these two cases:

1. Inside a **Method**: it will reference to the owner object 

    ```jsx

      const person = {
    		experience: 3,
    		introduction: function() {
    			return `I have ${this.experience} years of experience`		
    		}
      }

      person.introduction() //I have 3 years of experience

    ```

    Note that in this example the function is executed as a method of the `person` object. If you execute it as a normal function, `this` will refer to the global object. 

    ```jsx

      const fn = person.introduction
      fn()  //I have undefined years of experience

    ```

2. Inside an **Event Handler**: it will reference the element that triggered it. 

    ```jsx

       foo.addEventListener('click', function (e) {
    		this.style.color = "red"
    		return
       });

    ```

## `This` inside Arrow Functions

In all of the above examples, I only used regular functions, and there is a reason why: Arrow Functions are a compact alternative to a regular function, but they don't bind their own scope. This means that arrow functions inherit the reference of `this`, which in most cases it would be the global object.  

So, in order to get the `persona.introduction()` working with Arrows Functions, we have to enclosure it inside a regular function: 

```jsx
const person = {
		experience: 3,
		introduction: function() {
			const introduction = () => `I have ${this.experience} years of experience`
			return introduction()		
		}
}

person.introduction() //I have 3 years of experience 
```

The Arrow Function is inheriting the reference of `this` from its father function, which is a regular function as a method of `person`.

## Explicit Binding

You can explicitly indicate to a function the reference `this` should use. To achieve this, you can use the function's method `.bind()` 

In the next example, I will execute the `introduction()` method of `person` indicating the reference that `this` will use.

```jsx
const person = {
		experience: 3,
		introduction: function() {
			return `I have ${this.experience} years of experience`		
		}
}

const anotherPerson = {
		experience:7
}

const fn = person.introduction.bind(anotherPerson)
fn() //I have 7 years of experience
```

`bind()` will return a function bound with the object that you indicated. If you don't want a return, you can bind and execute with the methods `call()` and `apply()`. Like this: 

```jsx
person.introduction.call(anotherPerson) //I have 7 years of experience
```

The difference between `call()` and `apply()` is how you can pass in arguments. You may find more information on this topic on the JavaScript documentation of [MDN](https://developer.mozilla.org/en-US/).

## Wrap-Up

- `this` references to the object that is executing the block of code.
- Arrow Functions inherit the reference of `this`.
- You can define what reference of `this` a function should use with the methods: `bind()`, `call()`, or `apply().`

Hope this post helped you understand something more about JavaScript. 

Ask me any questions you have down on the comments section! 😉