# This cheatsheet you need


> The most dumbed down definition I have is: 'this' is the object that calls a function or the object where an arrow function is called

A more technical study is `dynamic scope` vs `lexical scope`;

### Who is 'this' in the for each function call?
        // 1. this in a function
        function mySingleFunc() { console.log(this) } // this is the Global object
        
        // 2. this in a constructor function
        const myObject = new function(){ this } // this is the new object 'myObject'
        
        // 3. this in an object method function
        myObject.myFunc = function() { console.log(this) } // this is myObject
        myObject.myFunc();
        
        // 4. this in an inner function of an object method function
        myObject.myFunc = function() {
                  const innerFunction = function() { console.log(this) } // this is the Global object
                  innerFunction(); 
         }
        myObject.myFunc();
        
        // 5. this in an async function callback in an object method function
         myObject.myFunc = function() {
                  setTimeout(function() { console.log(this) }, 0) // this is the Global object
         }
         myObject.myFunc();
        
        // 6. this in an object method arrow function
        myObject.myArrowFunc = () => { console.log(this) } // this is the Global object
        myObject.myArrowFunc();
        
        // 7. this in a inner arrow function in an object method function
        myObject.myFunc = function() {
                  const innerArrowFunction = () => { console.log(this) } // this is myObject
                  innerArrowFunction(); 
         }
        myObject.myFunc();

        // 8. this in an async arrow function callback in an object method function
        myObject.myArrowFunc =() => {
                  setTimeout(() => { console.log(this) }, 0) // this is the Global object
         }
        myObject.myArrowFunc();

        // 9. this in a inner arrow function in an object method arrow function
        myObject.myArrowFunc =() => {
                  const innerArrowFunction = () => { console.log(this) } // this is the Global object
                  innerArrowFunction(); 
         }
        myObject.myArrowFunc();

Checkout this  [plunk](http://plnkr.co/edit/pBF1R55J3na95zkA?open=lib%2Fscript.js)  for the live examples

### Let's dig deeper

You should know by now that when you call `myObj.myFunc()`, the `this` in `myFunc()` is myObj. myObj is the `scope` of myFunc;

This is an important concept to keep in mind in order to know who does what. 

Whenever you declare a simple `function myFunc() {}` at the root level of your code, that function is automatically bound to the Global scope. Which means that whenever you call that function by name, ex: `myFunc()` what happens behind the scenes is actually `window.myFunc()` in the browser or `global.myFunc()` in nodeJs. 

        myFunc() === window.myFunc()

**But** when you assign a function to a property of an object (myObj.myFunc = function() {}), that function becomes a method of that object and also is bound to that object. That's why, the `this` in that function is myObj, and myObj is the `scope` of `myFunc`.

**Keep in mind**, that if you declare/call a function (`myInnerFunc`) inside a `method` of an object, it's like you're calling `myObj.myFunc()` and then inside myFunc, you are actually doing `window.myInnerFunc()`, because `myInnerFunc` is not bound to `myObj` but just declared inside a method of that object. And that's why, the `this` inside the inner function is actually the `global` object. Same applies for callbacks of `setTimeout`, `setInterval`, or other `async` stuff you might do inside your function. 

**However**, things change for arrow functions `() => {}`, as these functions **don't have their own** `this` **binding** and they shouldn't even be used as methods. 

That's why, if you declare a method as an arrow function, altough the call looks like `myObj.myArrowFunc()` and you might think `this` is myObj, myArrowFunc will actually take the this from the scope in which it is called, and in this case, `this` will be the **global object**. They borrow their `this` from the wrapping scope in which the function is called. Same happens if there is an inner arrow function inside the method arrow function: it will be called in the scope of myArrowFunc which is the global one.

**But**, if you have a `myFunc: function(){}` method of an `myObj` object and inside you have `myArrowFunc` arrow function, the `this` of the arrow function will be the actual `myObj`, because myFunc will have a scope that is myObj, and the arrow function will be called in the `myObj` scope. Same happens if you have an arrow function as a callback inside an async function. The scope in which it will be called, it will still be `myObj`.

That's about it. Play with the examples and see for yourselves.