// Let's learn `this` in Javascript
Tags: javascript, beginners, codenewbie
Published: 2020-02-10 21:36:13

---
title: // Let's learn `this` in Javascript
published: true
description: A quick dive into self in Ruby
tags: javascript, beginners, codenewbie
cover_image: https://images.unsplash.com/photo-1525538182201-02cd1909effb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80
---


Hello World,

Today we will be going over the javascript keyword <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this"> `this`</a> (clickable). The value of `this` refers to the object that is executing at the current function (runtime binding). This topic often confuses a plethora of developers because it's one of the most commons JS keywords, but it's hard to tell what does `this` means. 

I'm assuming that you already know what an object, and a method is. However, if you are feeling rusty let's do a quick recap: 

- What is an object?

> is a set of data stored in name-value pairs (Hashes or key-value pairs).

Example of an obj: 👇

```js
const person = {
    name: "Greg",
    power_level: 10000,
    hobby: "cycling",
    age: "unknown",
    skill_user: true
}

```

In an obj you are able to store values such as string, integers, booleans, functions and even other objects.

- What is a method?

> is a function that belongs to an object.


```js

const person = {
    word: 'Alright!~',

    shouting: function(){
        console.log('Hey Luke!! wink wink ~');
    }
}

person.shouting(); // => Hey Luke!! wink wink ~

```

In the prior example `shouting` is a method of our person object.



## Qué es esto / this? 🧐


Again, in the context of JS 'this' refers to the object that our function belongs to. An example of `this` could be our person obj inside a function:

Example 1:

```js

const person = {
  name: "Isaac",
  routine: function() {
    console.log(this); // `this` refers to the current instance | object called person
  }
};

person.routine(); // => { name: 'Isaac', routine: [Function: routine] }

```
Executing the code above will let us see the person object.

```
  > typeof person
  > 'object'

```

Example 2:

```js

const person = {
    power_level: 25,

    afterTraining: function(){ // camel case
        this.power_level += 300;
    }
}

console.log('initial power level of ' + person.power_level + ".");
// => initial power level of 25.

person.afterTraining(); // => +300

console.log('Power after training: ' + person.power_level+ ".");
// => Power after training: 325.

``` 

As we can see the `afterTraining` function increases the `power_level` by 300.

![self-trip?](https://media.giphy.com/media/7SKOwf1nD6j6XhfLMG/giphy.gif)
<figcaption>Hey bud! are you still w/ me?</figcaption>


### Global context


If we type `this` in our browser console, it will refer to window - global object. __Chrome:__ Press `⌘ + ⇧ + C` to access the browser console.

```js
this // => Window obj

let hello = 'Hello, World!'
this.hello // => Hello, World!

window.heyCarl = 'Hey, Carl.'
this.heyCarl // => Hey, Carl.

const helloFix = 'Hello...repairman'
this.helloFix // => und ... undefined?

```

## Recap: 🔍

- By default `this` gets set to "window" obj, unless declared as something else.
- `this` is the obj that our function belongs to when called.

Thanks for reading 👋. Hey check out one of my friends blog:

__<figcaption>Shoutout Round 1</figcaption>__

{% link https://dev.to/iqramqra/releasing-your-inner-unicorn-3a0e %}

{% link https://dev.to/loripb/an-example-of-a-git-workflow-kje %}

{% medium https://medium.com/@lukelin1991/ive-been-working-on-the-rails-road-319721f25f61 %}

## References:

- <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this"> MDN - this</a>

- <a href="https://www.youtube.com/watch?v=gvicrj31JOM">JS on 'this' (YT)</a>


## Anything else?

Did I miss something? Please let me know in the comments!



![Great!](https://media.giphy.com/media/bznNJlqAi4pBC/giphy.gif)
__<figcaption>Yay!</figcaption>__

> By the way this was my first post! 🎉🎉🎉