Cracking the “this”tery 🤔 — Understanding this in JavaScript (with zero tears 😭)

Heya! 👋 It’s ya boy again, Hassani — the caffeine-chugging, console.log-debugging, bug-dodging JS dev that your browser warned you about 😎.

Welcome (or welcome back) to Gocoding, the only blog where we talk about JavaScript like it owes us money 🧾. If you’ve been here before, you know the vibes. If not, fasten your seatbelt and put down that energy drink (or don’t — we don’t judge here. Actually, who am I kidding? I’m sipping my 4th mug of coffee right now ☕😂).

Today, we’re diving into the Bermuda Triangle of JavaScript... the thing that has broken more developers than broken promises from internet providers. I'm talking about the this keyword. 😤

☕ Story time: The “this” that broke me

So here’s how this disaster began…

One bright day, I decided to go cold turkey 🦃 on frameworks. No React. No Vue. No Angular. Just me and vanilla JavaScript. You know, raw, unfiltered JS — like a dev returning to their roots in the jungle of callbacks and curly braces.

I was working on a small passion project (👀 dropping soon on GitHub or GitLab — stay tuned!), and everything was smooth. The code was looking cleaner than my room before guests arrive 🧼... until it happened. Until...

BOOM! 💥

Out of nowhere, this popped up like:

"Surprise motha******!" 😈

At first, I thought, “Eh, it’s just one weird output, probably a typo.” But oh no. This wasn’t a typo. It was the beginning of a war.

I spent hours — yes HOURS — crawling through StackOverflow like a digital raccoon 🦝, crying in Dev.to corners. I cried a little. Maybe a lot. I downed 60+ caffeine capsules in 3 hours (and yes, I’m proud of it — are we judging people now?? 😤🤣). I aged spiritually.

But after all the chaos, confusion, and chaos again… I finally understood this.

So I thought, why should the rest of you suffer like I did? 😭 And because I care about you (yes, YOU 🥺), I’m writing this blog so you don’t have to go through what I did. You get the answers. No alleyways. No tears. Just pure, hilarious enlightenment.

Alright, deep breath. Let’s do this.

Wait, before we begin... did you remember to close the fridge door after opening it earlier? Just checking. You forget sometimes. 🤨

Now let’s do this. And by “this,” I mean the keyword this. Let’s crack the “this”-tery. 🎩✨

🤯 What is this in JavaScript?

Imagine you're at a party. Someone yells, “HEY YOU!” You look around. Are they talking to you? Or the person next to you? Or your cat who walked in for no reason?

That’s this in JavaScript. It depends on where it’s called(context), how it’s called, and what mood the engine is in that day 😅.

In simple terms:
👉 this refers to the object that is executing the function. The parent object where the function / method is located at, aka scope or code environment.
👉 And depending on the situation, it can mean different things.

Let’s go on a trip down this lane 🛣️

🌍 this in the Global Scope

console.log(this);

If you run this in a browser:

Window {...} // the global object

Boom! In the global context, this points to the global object.

But wait — run that in Node.js?

{}

Yep. It’s not window, because Node.js doesn’t live in a browser. It’s got its own global scope.

So in browsers: this === window
In Node: this === {} (unless you're outside a module)

🔧 this Inside Regular Functions

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

In the browser, still window. Because who else is there to call it?

But — and this is important — in "use strict" mode:

"use strict";
function sayHi() {
  console.log(this);
}
sayHi();

Output?

undefined

Strict mode is like:

“No freeloading this references here. Declare your intent!”

So this in a function depends on how strict you are 😤

BTW, did you turn off your fan before leaving the room? That thing’s been spinning for no reason. 🤨

🧐 this Inside an Object Method

const person = {
  name: "Hassani",
  greet: function () {
    console.log("Hello, " + this.name);
  }
};
person.greet();

Output:

Hello, Hassani

Here, this points to the object that owns the method — person. Why? Because person is the one calling greet().

Simple, right?

Well, it won’t be for long. 😈

💥 Nested Functions Break this

const person = {
  name: "Hassani",
  greet: function () {
    function inner() {
      console.log(this.name);
    }
    inner();
  }
};
person.greet();

Output:

undefined

WHY!?

Because inner() is a regular function, and the context is LOST like your socks after laundry 🧦.

Solution?

🏹 Enter Arrow Functions (The this Stealers)

const person = {
  name: "Hassani",
  greet: function () {
    const inner = () => {
      console.log(this.name);
    };
    inner();
  }
};
person.greet();

Output:

Hassani

Arrow functions don’t have their own this. They inherit it from the parent scope.

So instead of yelling “HEY YOU!” into the void, arrow functions look at who they’re standing next to and go “Yeah, same here.”

Isn't that beautiful? 😭

⏰ this and setTimeout Shenanigans

const dog = {
  name: "Poppy",
  bark: function () {
    console.log(this.name + " says woof!");
  }
};

setTimeout(dog.bark, 1000);

Output:

undefined says woof!

more like “undefined says hello” …whaaat! JS really just said “Nope.” 😭

Fix it like this:

setTimeout(() => dog.bark(), 1000);

Or:

setTimeout(dog.bark.bind(dog), 1000);

Arrow functions or bind() to the rescue! 🦸 see, I care. I give you solutions…multiple solutions which you won’t find unless you cry yourself to sleep and go insane the next morning(I never went insane, just skipped that stage completely and was hospitalized …on multiple occasions 💀)

🔧 call, apply, and bind to the Rescue

You ever wanted to FORCE this to behave? You can!

function greet() {
  console.log("Hello, " + this.name);
}

const user = { name: "Hassani" };

greet.call(user);  // Hello, Hassani
greet.apply(user); // Hello, Hassani
const bound = greet.bind(user);
bound();           // Hello, Hassani

We already wrote a whole blog on these bad boys! 🥳 Check it out here:
👉 Mastering call, apply, and bind in JavaScript

We're not just helpful — we're thoughtful (and slightly evil, but in a weird way 🥴)

📚 Real Quick Recap

• In global scope, this is the global object

• In strict mode, it’s undefined in regular functions

• Inside object methods, this is the object

• Arrow functions don’t have their own this

• call, apply, and bind give you control like you're a JS god

• this is confusing, but you’re not alone. We cry too.

🧠 Conclusion

If you made it this far… wow. You must really like pain. Or JavaScript. Or both. Either way, I'm proud of you ❤️

this might feel like it’s out to get you, but once you understand its behavior, it becomes your loyal friend. Or at least, a tolerable roommate.

And remember:

If you're ever confused, ask:
"WHO is calling this function right now?"

That’s the key 🔑

Also, go turn off that gas cooker, please. It’s been hissing for an hour. You’re gonna burn the whole codebase 😅🔥

🧻 TL;DR (For the TikTok warriors 📱💀)

This is for the short-form content kings — or dare I say, the TikTok warriors 💀 — those soldiers of scroll whose attention span is currently beefing with a goldfish… and losing 😭🐠 Horribly. 😂

I can’t lie, competing with goldfish for attention span is insane but don’t worry man, I got you (as always).

I made this quick cheat sheet to protect myself from comments like:

• “Ain’t nobody reading all a dat” 😒

• “Too long, did read lil bro” ☠️

• “Congratulations or I’m sorry for your loss” 🤡

Let’s be real. I’m not tryna end up on a TikTok reel titled “Cooking of the century” 😭🎥

Here’s the speedy sauce 🍔:

• this depends on how and where a function is called

• In global scope → points to window (or global in Node)

• In strict mode → it’s undefined (strict mode said ✋ no freeloaders)

• Inside object methods → points to the object itself

• Arrow functions → steal this from their surrounding scope

• Wanna force this to behave? Use .call(), .apply(), or .bind() like a boss 🧠

Now go flex this knowledge on Twitter like:

"If you don’t get this, you ain’t got this." 😎

🎯 QUIZ TIME! (Comment your answers 👇👇👇)

1. What will this print?

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

2. How do you fix the this in this code?

const laptop = {
  brand: "HP",
  show: function() {
    setTimeout(function() {
      console.log(this.brand);
    }, 1000);
  }
};
laptop.show();

3. What is the output of this?

const dev = {
  name: "Hassani",
  greet: () => {
    console.log("Hello " + this.name);
  }
};
dev.greet();

👉 Drop your answers in the comments — or else I’ll send this after you. And trust me, you don’t want that smoke. 😤🔥

📚 References — Because I Don't Just Steal Code, I Cite Sources Too 😁

I don’t just steal stuff off the internet like a script kiddie who forgot npm install. I reference. I give credit. I cite sources. I got receipts 🧾.

Because some of you are actual bookworms. You read docs like novels and sleep with MDN under your pillow. And I respect that. So here’s a big warm hug to the documentation lovers, the reference chasers, the “lemme cross-check that” gang. I got you too 🥺

• MDN Web Docs — this

• Web.dev — The this keyword

• JavaScript in plain English — Mastering the ‘this’ Keyword

• Medium — Understanding “this” Keyword

• JavaScript.info — this

• FunFunFunction YouTube: “What is this?”

• Our Blog on call, apply, and bind 🔗

Until next time, stay weird, stay caffeinated, and may your this always point where it should 😎✌️

Peace!
— Hassani 💻💀