The Common Enemy, JavaScript's "This" Keyword Saves The Day
Tags: javascript, tutorial, webdev, beginners
Published: 2018-05-03 14:27:53

---
title: The Common Enemy, JavaScript's "This" Keyword Saves The Day
published: true
description: We would be trying to understand the concept behind the 'This' Keyword of JavaScript, why use it, how and when to apply it.
tags: javascript,tutorial,webdev,beginners
---
Developers everywhere both seasoned and those just beginning to code, all at one time or still never understand the `this` keyword of javascript, most view it as being complex. The key to understanding and simplifying the ideas behind the `this` keyword in JavaScript is by understanding;

1. Why we need `this` and why we should use `this` in the first place.
2. How `this` works.
3. How to identify what `this` is bound to.

According to [Getify in his "you dont know Js series"](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch1.md), explains `this` as a "special identifier keyword that's automatically defined in a scope of every function,but what exactly it refers to bedevils even seasoned JS Developers".

But **why** do we need to `this`? 

[Getify](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch1.md) explains that `this` provides a more elegant way of implicitly "passing along" an object reference, leading to cleaner API design and easier re-use. The more complex your usage pattern is, the more clearly you will see that passing context around wouldn't be an advantage to you, nor anyone reading your code. `This` allows us to reuse functions with different context, in other words it allows us to decide which object should be focal when invoking a functional method.

There are lots of confusions associated with the use of `this`;
Most developers try to think about it too literal. Most developers feel `this` refers to the function itself, but the fail to note that `this` binding has nothing to do with where a function is declared, but has instead everything to do with the manner in which the function is called.

But how do we identify what `this is bound to?;
*Note:*

1. The value of `this` is usually determined by a functions execution context. Execution context here means how the function is called.
2. It is important to know that this may be different (refer to something different) each time the function is called.

[Brandon Morelli](https://codeburst.io/javascript-the-keyword-this-for-beginners-fb5238d99f85) in his article "Javascript: The keyword 'this' for beginners", outlined that there are five general rules that you can use to determine what `this` is bound to;

A. **Global Object:**Fire up your chrome console(*ctrl+shift+j*), type ; `console.log(this)`, you notice what is outputted is the *window object*, this means that 'this' refers to the global object and it is as such because we are in the global scope. But to further prove that `this` here refers to the global object, lets declare a variable, in your console paste this code, `var myName = 
 Johnson;`, now when you call `myName` it returns *Johnson* but guess what else would return *Johnson* now copy and paste the code `window.myName` and see what it returns. 

What all of this mean is that every variable declared in the global scope is attached to the global or window object and that was why `this` when declared in the global scope refers to the global object.

Remember our *Note (1)*; the value of this is determined by when it is called. Say we have a function that returns `this` what do you think the console would log; try guessing before you run the code. The result is that the `this`, this time would refer to the *window object* and why is that? Because the nearest parent object to the `this` keyword is still the global object.

    function name()
    {
        console.log(this);
    }

    name();

Another rule we could use to determine what `this` is bound to is the;

B. **Declared Object:**
In this case when the keyword `this` is used inside of a declared object say `var person = {};`, the `this` keyword refers to the nearest parent object the method is called on. Take an example;

    var author = 
    {
      first: 'Johnson',
      last: 'Ogwuru',  
      full: function() 
        {
          console.log(this.first + ' ' + this.last);
        }
    };

    author.full();

It `logs=>(Johnson Ogwuru)`. To further prove that `this` in this context refers to the nearest parent object; copy and run the following code on your console;

    var author = 
    {
      first: 'Johnson',
      last: 'Ogwuru',  
      full: function() 
        {
          console.log(this);
        }
    };
    author.full();

As you would see the console returns the *person object*, proving `this` has taken the value of `author`. One last thing, remember we said that `this` refers to the nearest parent object; but how about a situation where we have nested statements;

    var author = 
    {
      first: 'Johnson',
      last: 'Ogwuru',  
      full: function() 
        {
          console.log(this.first + ' ' + this.last);
        },
      author2: 
        {
            first : "Jane",
            last: "Johnson",
            full: function() 
            {
              console.log(this.first + ' ' + this.last);
            }
        }
    };
    
    author.full();
    author.author2.full();

When `author.full()` is invoked, inside the function `this` is bound to the `author object`, and when `author.author2.full()` was invoked, `this` was bound to the `author2 object` which is the nearest object to it.

**Final Points to Note:**

1. The value of `this` is usually determined by a functions execution context.
2. In the global scope, `this` refers to the global object.
3. According to [getify](#), we use they `this` keyword to avoid complexities. Imagine a scenario in our previous example where we tried using `author.first` instead of `this.first` and it happens we have another global variable(*that we might or might not be aware of*) with the name `author`, `this` trying to reference it, would lead to *difficult-to-debug errors.*

To read more on `this` follow this links;
1. [codeburst](https://codeburst.io/javascript-the-keyword-this-for-beginners-fb5238d99f85)
2. [JavaScriptisSexy](http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/)