More JavaScript Questions 101(MJSQ 101): this
Tags: javascript, codenewbie
Published: 2020-02-13 01:22:45

## More JavaScript Questions 101(MJSQ 101): 

Continuing from my original [blog post]("https://dev.to/danvyle/more-javascript-fundamentals-101-4d5d"), I give you more javascript 101 questions!:


Today's blog will be dedicated to answering how `this` works.

`this` can produce many different results and a lot of it is case dependent. Because you're in the world of JS, a great way to determine what `this` is, is to `console.log(this)` to check. BUT, if you want to understand the background work that is happening, please read on.

Arnav Aggarwal has a great blog explaining how `this` works. Much of the examples below are taken directly from his blog. 

The highest rule of all is that `this` is determined when a function is invoked (it's **call site**) The remaining rules in order of precedence is showcased below:

#### 1. If `new` keyword is used when calling a function,  `this` is a brand new object. 


```js 
function forExample() {
    console.log(this);
    this.value = "football";
    console.log(this);
}

new forExample();
//output: {}
//output: {value: 'football}
```


#### 2. If `apply`, `call`, or `bind` are used to call a function, `this` inside the function is the object(in this case, `touchdown`) that is passed in as the argument.

```js 
function score() {
    console.log(this);
}
var touchdown = {
    value: 6
};
var bindscore = score.bind(touchdown);
bindscore();     // output: -> { value: 6 }
score.call(touchdown);  // output:  { value: 6 }
score.apply(touchdown); // -> output: { value: 6 }
```


#### 3. If a function is called as a method, `this` is the object. When a dot is to the left of the function invoked, `this` is the object to the left of the dot.

```js

var obj = {
    value: 6,
    printThis: function() {
        console.log(this);
    }
};

obj.printThis(); 
//output: {value: 5, printThis: function()}
```



#### 4. If a function is invoked as a **free function invocation**, (global), `this` is the global object. In a browser, it's the `window`.

```js
function fn() {
    console.log(this);
}
// If called in browser:
fn(); // output: Window {stop: ƒ, open: ƒ, alert: ƒ, ...}
```

To note: If multiple scenarios exist, the order of the previous mentioned conditions are important in establishing `this`.



#### 5. If the function is an ES2015 arrow function, all rules are thrown out the window. To determine `this`, go a line above the arrow function's creation and see what `this` is there. It will be the same in the arrow function.

```js
const obj = {
    value: 'Chiefs win superbowl.',
    createArrowFn: function() {
        return () => console.log(this);
    }
};
const arrowFn = obj.createArrowFn();
arrowFn(); 
// output: { value: 'Chiefs win superbowl.', createArrowFn: ƒ }

```
Hope this explains `this` better for you!

That's all for today, please leave any comments/questions/corrections in the comments. Thanks!



###### Sources:
Huge huge thanks to github user: yangshun for aggregating the most popular JS, CSS and HTML questions and giving us his answers to it. My weekly blog posts are to go over several questions at a time to reinforce my knowledge of fundamental javascript as I grow my expertise in it. Many of my blog will be paraphrasing if not direct quote from his github. Find his tech interview handbook [here]("https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questions.md#whats-the-difference-between-call-and-apply") and please support him!

And an additional thank you to Flatiron alum: Marissa O. who is a badass developer at Forbes magazine for directing me to his blog!

Other sources:
https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3