Understanding the this Keyword in JavaScript: A Simple Guide

If you are learning JavaScript, you have probably bumped into the this keyword. For many beginners, this can feel confusing and unpredictable. Sometimes it points to an object, and other times it points to the window.

But don't worry! In this article, we are going to break it down in simple English. By the end of this read, you will understand exactly how this works.

What this Represents

The easiest way to understand this is to think of it like a pronoun in English.

Imagine I say: "John dropped his pen. He picked it up." You know that "He" refers to John.

In JavaScript, this works the same way. It is a shortcut reference to the "thing" that is currently acting. The golden rule of this is simple: this refers to the caller of the function. It depends completely on how a function is called, not where it is written.

Concept Diagram: The Caller Relationship

[ The Caller ]  --------calls-------->  [ The Function ] 
      |                                        |
      +------- 'this' points back to -------->-+

Whenever a function runs, ask yourself: "Who called this function?" The answer to that question is your this.

this in the Global Context

Let's start with the simplest scenario: using this out in the open, outside of any function or object.

console.log(this);

When you write this in the global scope (just right in your main code file), it points to the Global Object.

• If you are running JavaScript in a web browser, the global object is the window.

• So, in a browser, this is equal to window.

this inside Objects

This is where this becomes really useful! When you put a function inside an object, we call it a "method". When a method is called, this points to the object that holds the method.

Let's look at a simple example:

const user = {
  name: "Sarah",
  sayHello: function() {
    console.log("Hello, my name is " + this.name);
  }
};

user.sayHello(); // Output: Hello, my name is Sarah

Why did this work? Look at how we called the function: user.sayHello(). Who is the caller? The user object is on the left side of the dot. Because user called the function, this becomes the user object. Therefore, this.name is the same as user.name.

this inside Regular Functions

What happens if we just write a normal function and use this inside it?

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

showThis();

Here, we called showThis() all by itself. There is no object on the left side of a dot. Because there is no specific caller, JavaScript defaults to the global object (the window in a browser).

(Note: If you are using "strict mode" in JavaScript by writing "use strict"; at the top of your file, JavaScript stops doing this. Instead of pointing to the window, this will just be undefined).

How Calling Context Changes this

Because this depends on how a function is called, the exact same function can have a different this depending on who triggers it.

Let's look at a common trap that confuses many developers:

const user = {
  name: "Sarah",
  sayHello: function() {
    console.log("Hello, my name is " + this.name);
  }
};

// We store the function in a new variable
const looseFunction = user.sayHello;

// We call the new variable
looseFunction(); // Output: Hello, my name is undefined

Wait, what happened? Why is it undefined?

Even though sayHello was written inside the user object, look at how we finally called it at the bottom: looseFunction().

• There is no dot.

• There is no object on the left.

• It is being called as a plain, regular function.

Because the "calling context" changed from an object method to a regular function, this lost its connection to user and went back to the global window object. Since the window object doesn't have a name property called "Sarah", it prints undefined.

Summary Diagram: Contexts of this

WHERE IS IT CALLED?                  WHAT IS 'this'?
--------------------------------------------------------------
1. Global Scope -------------------> Global Object (Window)
2. Object.method() ----------------> The Object itself
3. RegularFunction() --------------> Global Object / undefined

---

Conclusion

The this keyword doesn't have to be scary! Just remember to look at the moment the function is called. If there is an object to the left of the dot (like myObject.myFunction()), then this is that object. If it's called all by itself, this is the global window.