What is "This"?
Tags: beginners, javascript, this, webdev
Published: 2018-11-09 07:25:56

---
title: What is "This"?
published: true
description: short, simple breakdown of "this" keyword
tags: beginner, javascript, this, webdev
cover_image: https://fsmedia.imgix.net/40/d4/4a/fd/3a5e/49a7/a675/9a976d8f24bf/is-this-a-pigeon-meme.jpeg?rect=0%2C61%2C650%2C325&dpr=2&auto=format%2Ccompress&w=650
---

## Simplifying the **"this"** Javascript keyword


The "this" keyword always refers to an **object**, but the value of "this" changes depending on where it is called. When a function is called, an execution context is created that contains a reference to "this". Because the value of "this" changes depending on execution context, we can determine the value of "this" by examining the function's **call-site**, or where it is called.

#### Conveniently, there are four simple rules to help determine the value of "this"!

### Rule #1: Default Binding

When called alone, or within a function, "this" will refer the Global object. In a browser, this will refer to the Window object. One exception to this is if the user is in strict mode, in which case "this" will be undefined. 

![default example](https://thepracticaldev.s3.amazonaws.com/i/6voq05f3flwlffnevpcx.png)
 <figcaption>In this example, you would get a console log of the global object</figcaption>

### Rule #2: Implicit Binding

If a function is contained within an object, "this" will refer to the nearest parent object. Even if the function is only referenced in the object, "this" will still refer to the object.

![implicit example](https://thepracticaldev.s3.amazonaws.com/i/pb52nfl8kd4xaqpfkzqs.png)
<figcaption>In this example, we console log out "😸 Meow!"</figcaption>

### Rule #3: Explicit Binding

There are three functions *call*, *bind*, and *apply* that can be used to set the value of "this". Call and apply work largely the same way, the first argument passed to each will be what "this" refers to. Bind actually creates a new function which a permanently assigned "this" value. 

![explicit example](https://thepracticaldev.s3.amazonaws.com/i/khyr03oy7d5sh0rbtuta.png)
<figcaption>In this example, all three functions set "this" explicitly.</figcaption>

### Rule #4: New Binding 

When using the **new** keyword, "this" will refer to the new object that is being created.

![new example](https://thepracticaldev.s3.amazonaws.com/i/f3e3ugipckv0o1nrnt35.png)
<figcaption>In this example, "this" points to the new object and prints out my kitty's name</figcaption>

### The Arrow Function Exception!

One exception to these general rules of thumb is that when using an arrow function, "this" will retain the value of its parent scope. 

![arrow example](https://thepracticaldev.s3.amazonaws.com/i/t7mnz19w1emt6ljcxk81.png)
<figcaption>Here, "this" retains the value of its parent function.</figcaption>

### The Dev Recap:

So a quick summary of the "this" keyword:

1. "This" is usually determined by a function's execution context.
2. By default, "this" refers to the global object (window object in a browser).
3. When the "new" keyword is used, "this" will refer to the new object.
4. *Call*, *bind*, and *apply* can be used to set "this" value.
5. Arrow functions do not re-bind "this".

Hopefully this is helpful to someone new to Javascript who is trying to wrap their head around the "this" keyword! Thanks for reading and don't forget to **follow**!!