JavaScript This

This past week I was going through an interview in JavaScript, things were going well for the most part until we got to this. I explained (with perhaps a few umms and some circular discussion) that it refers to the owner of the method and is commonly used with object methods or in a constructor. To my surprise, the interviewer kept digging and I soon had to admit to myself, and to them, that I had not used this very much in JavaScript. I had simply never needed it since most of my work to date has been taking JSON from an API call then rendering it. In these functions this referred back to the Global Object [object window]. The interviewers next comment got my attention though and drove this blog “There is no JavaScript without this”

Before we dig any deeper it's important to understand this on a technical level. This can give different results based upon the situation, this post by David Polcari does a very good job of explaining it but in short, how this reacts is a byproduct of the fact that JavaScript is Object-Oriented (in a fashion), everything is an object, so where you use it means that it returns is referring back to the parent object in that scope, frequently the Global Object in simple applications. Ok, so why is that important?

this has different values depending on where it is used:

1. In a method, this refers to the owner object
2. Alone, this refers to the global object
3. In a function, this refers to the global object
4. In a function, in strict mode, this is undefined
5. In an event, this refers to the element that received the event
6. Methods like call() , and apply() can refer this to any object

We are going to focus on the first and the fifth items today, though things get much more interesting (and confusing) when you start dealing with call() apply() and bind.

Using This

Now that we have talked around this let us use it. My favorite dataset of easy to wrap my head around and easy-to-use information is Pokeapi. So let's build some poke methods that use this. We will start by building a pokemon object that references data from the Pokeapi.

const pokemon = {
    name: houndour,
    url: "https://pokeapi.co/api/v2/pokemon/houndour",
    weight: 108,
    greeting: function() {
            return "Hi, my name is ${this.name}"
        }
}

The above methods creates an Object called pokemon and this pokemon has several attributes, one of which is a function (yay First Class Functions) that will return a message ‘Hi, my name is ${this.name}’. When this is called here it is referring to the parent object (pokemon) and returns the string ‘houndour’. The resulting output is 'Hi, my name is houndor’, pretty neet.

The other way to use this that we will cover today is when working with events. In JavaScript, an event is tied to an element on the DOM. For example, if you click a button, triggering a ‘click’ event, that event is a child of the button element. This means that this for that event is referring back to the button element. To demonstrate we can imagine the following code

<button onclick="this.style.display='none'">Click to Remove Me!</button>

When the resulting button is clicked, the onClick event is triggered and the JavaScript this.style.display='none' is executed and the button disappears!

If you are new to JavaScript or new to this I highly encourage you to keep working on it. As I am growing and learning I keep seeing more and more interesting uses and applications.

As always, feel free to drop a comment or send me a message if you want to discuss further.