JavaScript: What is `this`?!
Tags: javascript
Published: 2019-04-30 21:04:01

---
title: JavaScript: What is `this`?!
published: true
description: 
tags: #javascript
---

# JavaScript: What is `this`?!
*As you read this blog post, it might be helpful to open up your Developer Console (Windows: Ctrl + Shift + J or Mac: Cmd + Option + J) and code along with me. *
# Overview: `this` 
In Javascript, `this` is all about context and *this* can be very confusing.
What I mean ☝ is that the value of `this` is dependent on its execution context (ie: where `this` is being called) - meaning that depending on where `this` is being executed/called, what `this` references will change. That's what can make `this` so useful. In order to understand the value of `this` we need to look to the call site (execution context).
Try pasting this code in your console:
```
console.log(this);
```
You should see something like this after you hit the return key :
```
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
```
which means that `this` refers to the global window object. This makes sense becuase we called `this` from the console (its execution context), which by default refers to the global window object.
In a simple function call, the execution context for `this` refers to the global (window) object by default.
Here's an example of that:
```
function hey () {
 console.log("Hey, I'm a simple function call");
 console.log(this === window); 
}
hey()
```
You shoud see this in your console:
```
Hey, I'm a simple function call
true
```
Here, in a simple funcion call, `this === window`, which is why the console.log came back as `true`.
Now put this into your console:
```
var animal = { 
 cat : function() {
 console.log(this)
 console.log(this.sound)
 },
 sound: "hrrrrmph"
}
animal.cat()
```
You should see something like this in your console:
```
cat: ƒ, sound: "hrrrrmph"
```
followed by: 
```
hrrrrmph
```
in the above context, `this` refers to the animal object and `this.sound` becomes the animal object's sound value ("hrrrrmph").
Ok, lets' take it up another level!
```
var animal = {
bear: function () {
 var sound = "ROARRRR"
 
 this.cat()
 },
cat : function() {
 console.log(this.sound)
 },
 sound: "hrrrrmph"
}
animal.bear()
```
What do you think will happen when we run the above code?
Here, by calling `animal.bear()` we call `this.cat()` which logs in our console "hrrrrmph". That's becuase the execution context for *this* in `this.cat()` is animal. So calling `animal.bear()` calls `animal.cat()` which `console.logs(this.sound)`.
What if we moved the var sound = "ROARRRR" from the bear to cat?
```
var animal = {
bear: function () {
 this.cat()
 },
cat : function() {
 var sound = "ROARRRR"
 console.log(this.sound)
 },
 sound: "hrrrrmph"
}
animal.bear()
```
Did you guess that we would still get "hrrrrmph"?! 
I didn't! But like I said before,*THIS* is complicated! Let's remember the other thing I said before. `this` is all about context (execution context to be exact). Let's walk through it together.
When animal.bear() is being called, the `this` in `this.cat()` is the animal object. So the `this` in the `console.log(this.sound)` is the animal object! This is where the call was executed, which means that we are console logging `animal.sound`.
What about this code below? Try to figure out the execution context of `this`.
```
var animal = {
bear: function () {
 this.cat()
 },
cat : function() {
 var sound = "ROARRRR"
 console.log(this.sound)
 },
 sound: "hrrrrmph"
}
animal.cat()
```
`this` still refers to the animal object! So, we still get `hrrrrmph`
OK, let's try to get deeper into `this`:
```
var animal = 'Cat'
var forest = {
 animal: 'Bear',
 ocean: {
 animal: 'Pelican',
 animalName: function() {
 return this.animal
 }
 }
}
forest.ocean.animalName()
```
OK, BEFORE we go on to see what the code above will return, let's talk about the scope of each animal.
* **Cat** 🐱 belongs to the GLOBAL 🌐 window .
* **Bear** 🐻 belongs to the FOREST 🌲 scope. 
* **Pelican** 🐦 belongs to OCEAN 🌊 (forest.ocean)
Now back to the code. 
What do you think `this` refers to in the context `forest.ocean.animalName()`? It's the `forest.ocean` object! So, this.animal (which is the same as forest.ocean.animal) returns "Pelican" because the Pelican belongs to the OCEAN.
GOOD.
What if we added this to the code to the console:
```
var animalName = forest.ocean.animalName
```
making `animalName` a function that returns `this.animal` Now, run this code in your console:
```
animalName()
```
what do you think we would see returned? What is the execution context of `this`? If you said global, you are right! Running the code `animalName()` is equivalent to running this.animal, and since we are executing this code from the global window, it's just like calling window.animal, which is "Cat"!
How would I be able to use the animalName() (which returns `this.animal`) to return "Bear"?
# 📞 The call 
That's where the .call() function comes in. [Here's ](https://www.w3schools.com/js/js_function_call.asp)what the W3Shool says about the .call(): 
***With call(), an object can use a method belonging to another object. ***
Sounds simple enough. Let's code it in! Since we know from ☝ that Bears belong to FOREST, let's pass forest in to the .call function.
```
animalName.call(forest)
```
And TA-DAAA, we get "Bear" 
What would we get if we executed this code:
```
animalName.call(window)
```
That's right, we'd get "Cat".
Now that we have a handle on `this`, let's talk about when using `this` won't work for us.
# The ➡️ arrow function and `this`
Arrow functions are a more syntactically concise way of writing function expressions and some argue are easier to read. You can read more about arrow functions [here](https://medium.freecodecamp.org/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26) and [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions). But here's the briefest of overviews:
A regular function is written like this:
```
function animalName () {
 return this.animal
}
```
Here's how the same function looks with an arrow function:
```
arrowAnimalName => () => this.animal
```
I like them both, but I'm a gemini, so that's to be expected.
BUT why am I bringing up arrow functions in relation to `this`, you ask.
It's because in arrow functions `this` is lexically bound - meaning that `this` never changes 😱.
[Cynthia Lee](https://medium.freecodecamp.org/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26) on FreeCodeCamp breaks it down like this:
***In classic function expressions, the this keyword is bound to different values based on the context in which it is called. With arrow functions however, this is lexically bound. It means that it uses this from the code that contains the arrow function.*
**
Which means that we can't use .call(), or .apply() or .bind() with arrow functions because `this` is lexically bound to the where the arrow function is executed.
So if we run 
```
arrowAnimalName.call(forest) 
```
we will get "Cat" because the `this` is lexically bound to the Global window where we defined this arrow function.
All of `this` can get really confusing and maybe feel overwhelming. But you know what? We will always have `console.log(this)` and `debugger` to help us find out what `this` really is, and THAT leaves me feeling pretty 🌈 .
Thanks for reading!