Understanding ‘this’ in JavaScript

I researched online to see what JavaScript developers believe to be the most confusing part of the language. I did not take a tally, but I could make a guess that closures came in first and ‘this’ came in second. The ‘this’ keyword was one of the hardest concepts for me to understand while learning JavaScript. It seemed impossible to figure out what its value would be. This article will explain what ‘this’ is and how its value is determined.

Objects are referenced

Before jumping into ‘this’, we need to understand one thing about objects. When we create a variable with a primitive value, it creates a whole new value entirely. Let’s look at code to see what I mean.

In this example, we can see that a is a number, a type of primitive value. The b variable’s value becomes the value of a. When a changes its value, b stays the same. This is because primitive values are copied. They do not reference the original value.

It is common for new JavaScript developers to believe that objects act the same way primitive values do. However, this is not the case. Objects are referenced instead of copied.

In this example, we see that c’s value is a newly declared object. This new object has a property name whose value is “Bobby”. The d variable’s value becomes the c variable. When we change name on the object declared in c, it also changes the name property on d. This is because objects are referenced and not copied. d was referencing the same object that was declared on the c variable.

I encourage you to do these examples on your own so that you fully understand what is happening.

‘this’ is an object reference.

If there is only one thing you get from this article, let it be that the value of ‘this’ is a reference to an object. There will never be a case where ‘this’ will be something other than an object reference.

From this example, we see that the first ‘this’ is referencing the global window object, and the second ‘this’ is referencing the random object.

Does ‘this’ change based on what object it is inside?

No, it doesn’t. So if ‘this’ doesn’t reference the object it’s inside of, what does it reference?

function calls and ‘this’

Here is where people start to get confused. Every time a function is invoked, a brand new ‘this’ variable is created. In the last example, the ‘this’ in the objects are not in a function, which means it will still reference the global object. What happens if we create functions that log the ids?

Now we get what is expected. When we invoked the function, its new ‘this’ variable referenced a different object then the window.

If a new ‘this’ variable is created when a function is invoked, does ‘this’ reference the object where the function was declared?

If that was the case, 1 would have been logged every single time. It’s not where the function was declared that represents the ‘this’ value, but what object invokes the function. Since the first time getId was invoked was by the window, it logs window’s id property. firstObject invokes getId the second time, so it will log firstObject’s id.

Common scenarios with ‘this’

Constructor Functions

There are a few situations where ‘this’ is used often. Constructor Functions use it to create new objects.

When a function is run as a constructor with the new keyword, an object is created and ‘this’ references the new object. Just make sure that the new keyword is used or the properties with ‘this’ will be put on a different object.

Call and Apply method

There are a few function methods that use the power of ‘this’. The call and apply methods are used to invoke a function while changing the object ‘this’ is referencing.

From the example, we can see that by invoking describePet without call, ‘this’ is referencing the window object. When we invoke the function with call and pet as its argument, ‘this’ references pet. This is extremely useful, especially when using modules.

Though I did not make an example with apply, just know that it has the same functionality with ‘this’ that call does. You can find the differences between the two here.

The Bind method

Bind is also a function method that changes what object ‘this’ is referencing. The difference is that bind creates a new function that is not immediately invoked.

Every time greetMichael is invoked, ‘this’ will always reference person1. Bind is used often when dealing with event handlers such as click events.

Important concepts with ‘this’

strict mode

If “use strict” is placed inside the scope of a function, ‘this’ will not reference the global object but will be undefined.

fat arrow functions

Fat arrow functions, a new function syntax created in ES6, made changes to how ‘this’ is used. Every time an arrow function is invoked, it does not create a ‘this’ variable. Therefore, ‘this’ will reference whatever the function’s lexical environment references.

Resources for more information on ‘this’

‘this’ is not an easy subject matter in JavaScript. Sometimes it takes other perspectives for it to sink in. I encourage you to take a look at these other resources if you are still confused.

  1. Understanding “this” with Clarity, and Master It.

2. Understanding the “this” keyword in JavaScript.

In order to use well, one must first understand well.