C
JavaScript list
Previous10 / 21Next
JavaScript/Functions/Lesson 10

this — *JavaScript's Mystery*

30 min·theory
This chapter
4/4

this — *JavaScript's Mystery*

🎯 What you'll be able to do after this lesson

After finishing this lesson, you'll be able to confidently do the following 3 things.

  • ▸✅ Understand how a regular function's this changes depending on the call context
  • ▸✅ Understand the difference in this binding with arrow functions
  • ▸✅ Know when to use call, apply, and bind

Keep the learning objectives as a checklist, and close the lesson once you can answer all of them.

this is determined in *4 ways*

Core in One Line

In JS, this is determined in 4 ways based on how the function is called. It's the biggest difference from other languages. Memorize it once, remember it for life.

1. Default Call — global or undefined

javascript
function fn() {
    console.log(this);
}
fn();   // Browser: window / Node: global / strict mode: undefined

A regular function call has no call context → the global object or undefined.

2. Method Call — the object before the dot

javascript
const user = {
    name: "Hong Gildong",
    greet() {
        console.log(this.name);   // this = user (object before the dot)
    }
};

user.greet();   // "Hong Gildong"   ← user.greet() → this = user

// ⚠️ Key point: the object before the dot *at the time of the call* is this — even the same function behaves differently depending on how it's called!
const fn = user.greet;   // Extract the function alone into a variable (separated from user)
fn();   // undefined   ← called without a dot → this = global (or undefined)
//                       → this.name = no name on global → undefined

Even the same function has a different this depending on how it is called.

3. new Call — a new instance

javascript
function User(name) {
    // 🆕 When called with new, a new empty object { } becomes this
    this.name = name;        // Set name property on the new object
    // Automatically return this; (omitted)
}

const u = new User("Hong");   // ▶️ Create a new instance
console.log(u);               // User { name: "Hong" }
console.log(u.name);          // "Hong"

When called with the new keyword, a new object is created and that object becomes this.

4. Explicit Binding — call · apply · bind

javascript
function greet() {
    console.log(this.name);
}

const user = { name: "Hong" };

// 1️⃣ call — specify this + call immediately (arguments listed as-is)
greet.call(user);          // "Hong"

// 2️⃣ apply — same as call, but arguments passed as an array
greet.apply(user);         // "Hong"

// 3️⃣ bind — creates a new function with this "fixed" and returns it (does NOT execute immediately)
const bound = greet.bind(user);
bound();                   // "Hong"   ← this = user is fixed no matter where it's called later

// 💡 Key difference:
//   call/apply  → execute immediately
//   bind        → returns a new function (executes later)

Arrow Function — has no this

javascript
const obj = {
    name: "Hong",

    // Regular function — this = obj (object before the dot)
    method1() {
        return this.name;          // "Hong"
    },

    // Arrow function — this = surrounding scope (global here)
    method2: () => this.name,      // undefined
};

console.log(obj.method1());   // "Hong"        ← regular function: this = obj
console.log(obj.method2());   // undefined    ← arrow: this is not obj!

Arrow functions have no this of their own — they use the this of the outer scope. The most common use case:

javascript
class Counter {
    constructor() { this.count = 0; }

    start() {
        setTimeout(() => {
            this.count++;       // ✅ Counter's this is preserved
        }, 1000);

        // If it were a regular function:
        // setTimeout(function() { this.count++ }, 1000);
        // this = window → doesn't work
    }
}

In React

jsx
// Arrow function — no this concerns
<button onClick={() => this.handleClick()}>...</button>

// Or more modern:
<button onClick={this.handleClick}>...</button>   // class method directly

In functional components (the modern standard), this is not used at all. Hooks replace it.

Decision Order (no need to memorize, just reference)

1. new? → new object
2. Explicit call · apply · bind? → that object
3. obj.method() dot notation? → that object
4. Otherwise → global / undefined (strict)

Summary

  • ▸this is determined by how the function is called
  • ▸Method call → object before the dot
  • ▸new call → new instance
  • ▸Explicitly overridable with bind · call · apply
  • ▸Arrow functions have no this of their own — the safest choice

⚡ Try it yourself — 4 ways to call this

See at a glance how `this` changes depending on how the same function is called.
✏️ JS 코드
📟 Console output
▶ Press the Run button
⚠️ Runs in a browser sandbox — only console.log() is supported; alert/fetch are not.

🤖 Try asking AI like this

Once you understand the concepts in this lesson, you can give AI specific instructions. Instead of a vague 'fix this', you make requests with vocabulary — that's where token savings begin.

  • ▸"Fix this callback's this binding issue using an arrow function or bind"
  • ▸"Stabilize this class method with explicit .bind(this)"
  • ▸"Tell me how this code's this behavior changes when strict mode is enabled"

Why This Reduces Tokens

Without knowing the concepts, you have to follow up with 'What does that mean?' after receiving an AI response. That follow-up question is what consumes tokens. Learn the concept once, and the conversation ends in one exchange.

Read this first: Scope and Closures
Up next: Object Essentials — Creation · Access · Destructuring · Spread
PreviousListNext
this Binding — Implicit/Explicit/Arrow Functions, call/apply/bind - JavaScript