DEV Community

Gift Egbonyi
Gift Egbonyi

Posted on

Understanding the `this` Keyword in JavaScript

#javascript #webdev #this #beginners

Hey friends! 👋

It’s another Wednesday, and yes, we’re still learning JavaScript together!

Today’s topic is one that confuses almost everyone when they first start out: the this keyword.

Let’s simplify it and see how it works using a live demo.

What is this?

this refers to the object that owns the code being executed.
But what that means depends on how and where you use it.

Let’s look at 4 common places you’ll see this in action.

1️⃣ In the Global Scope

In browsers, this in the global scope refers to the window object.

console.log(this); // window
Enter fullscreen mode Exit fullscreen mode

2️⃣ Inside an Object Method

When this is used inside a method, it refers to the object that owns the method.

const person = {
  name: "Gifty",
  greet() {
    console.log("Hi, I'm " + this.name);
  },
};

person.greet(); // "Hi, I'm Gifty"
Enter fullscreen mode Exit fullscreen mode

3️⃣ Inside a Regular Function

If you use this inside a normal function (not part of an object),
this will be undefined in strict mode — or window in non-strict mode.

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

showThis(); // undefined (in strict mode)
Enter fullscreen mode Exit fullscreen mode

4️⃣ Inside an Arrow Function

Arrow functions don’t have their own this.
They inherit this from where they were created.

const obj = {
  name: "GiftinTech",
  arrow: () => {
    console.log(this.name); // undefined
  },
  regular() {
    console.log(this.name); // "GiftinTech"
  },
};

obj.arrow();
obj.regular();
Enter fullscreen mode Exit fullscreen mode

🧑‍💻 CodePen Demo

Play with this

We’ll build a mini visualiser that lets you click buttons to see what this refers to in each context.

HTML 

<div class="container">
  <h2>JavaScript "this" Visualiser</h2>
  <p>Click the buttons below to see what <code>this</code> refers to!</p>

  <button id="globalBtn">Global Scope</button>
  <button id="methodBtn">Object Method</button>
  <button id="regularBtn">Regular Function</button>
  <button id="arrowBtn">Arrow Function</button>
  <button id="eventBtn">Event Listener</button>

  <div id="output" class="output">Click a button to see the result 👇</div>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS 

body {
  font-family: system-ui, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f7f7f7;
}

.container {
  background: white;
  padding: 20px 30px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

button {
  margin: 5px;
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: #4f46e5;
  color: white;
  font-size: 14px;
}

button:hover {
  background: #4338ca;
}

.output {
  margin-top: 20px;
  padding: 15px;
  border: 1px dashed #ccc;
  border-radius: 8px;
  background: #fafafa;
  font-family: monospace;
}
Enter fullscreen mode Exit fullscreen mode

JavaScript 

const output = document.getElementById("output");

function logResult(label, value) {
  output.textContent = `${label}: ${value}`;
}

// Global scope
document.getElementById("globalBtn").addEventListener("click", function() {
  logResult("Global this", this === window ? "window" : this);
});

// Object method
document.getElementById("methodBtn").addEventListener("click", function() {
  const user = {
    name: "Gifty",
    sayName() {
      logResult("Object Method", this.name);
    },
  };
  user.sayName();
});

// Regular function
document.getElementById("regularBtn").addEventListener("click", function() {
  function showThis() {
    logResult("Regular Function", this === window ? "window" : this);
  }
  showThis();
});

// Arrow function
document.getElementById("arrowBtn").addEventListener("click", function() {
  const arrow = () => logResult("Arrow Function", this === window ? "window" : this);
  arrow();
});

// Event listener
document.getElementById("eventBtn").addEventListener("click", function() {
  logResult("Event Listener", `this is the button with text: "${this.textContent}"`);
});
Enter fullscreen mode Exit fullscreen mode

How the Demo Works

  • Global Scope: this → window
  • Object Method: this → the object (user)
  • Regular Function: this → undefined (in strict mode)
  • Arrow Function: this → the outer context (inherits)
  • Event Listener: this → the element that triggered the event

👉 Try it on CodePen

🙋🏾‍♀️ Wrap-Up

this can be tricky — but once you understand how it’s set depending on where and how a function runs, it starts to make sense.

Here’s a quick summary:

Context this refers to
Global scope window
Object method The object
Regular function undefined (strict mode)
Arrow function Inherits from outer scope
Event listener The element clicked

That’s it for today!
What should we talk about next Wednesday? Drop it below 👇

Connect with me on GitHub

Was this tutorial helpful? Got questions? Drop them in the 💬, I love feedback.

I’m keeping these light, fun, and useful, one small project at a time.
If you enjoyed this, leave a 💬 or 🧡 to let me know.

Follow me for more short, beginner-friendly JavaScript lessons every week.

I'm still hunting for full stack roles,
contract or full-time.
Please check out my [Portfolio](https://gift-egbonyi.onrender.com)
Enter fullscreen mode Exit fullscreen mode

Portfolio

Web trails:
LinkedIn | X (Twitter)

See you next Wednesday 🚀, on time!

Till then, write clean code and stay curious. 🦋

Top comments (0)