The 'this' Keyword

Relax. We'll talk through this in plain words — no textbook voice.

'this' keyword refers to different values depending on the execution context.

🎯 'this' Contexts:

• Global: window object (browser)

• Object method: The object

• Constructor: New instance

• Arrow function: Lexical this

• Event handler: The element

javascript

// 1. In object method
const person = {
    name: "Aung Kyaw",
    greet: function() {
        return `Hello from ${this.name}`;
    }
};
console.log(person.greet());

// 2. Regular function vs Arrow function
const obj = {
    value: 42,
    regular: function() {
        setTimeout(function() {
            // 'this' is undefined (strict mode) or window
            console.log("Regular:", typeof this);
        }, 10);
    },
    arrow: function() {
        setTimeout(() => {
            // 'this' refers to obj
            console.log(`Arrow: ${this.value}`);
        }, 10);
    }
};

console.log(person.greet());
obj.arrow();

// 3. Explicit binding
function introduce() {
    return `I am ${this.name}`;
}
const user = { name: "Ma Ma" };
console.log(introduce.call(user));

You should see

Hello from Aung Kyaw Arrow: 42 I am Ma Ma