In this post we will explore what this keyword refers under various conditions and there by understand the keyword and how it works in javascript.

The this keyword can point to

The object when referenced within the obejcts method.
The window object - when referenced within a function.
The instance of the object when the new keyword is used.
The object when arrow function is used`

`this` within method of an object - no arrow function

const obj = {
    name: "obj",
    printName() {
        console.log(this.name);
    },
    printObj() {
        console.log(this); // this refers to the object `obj`
    }
}
obj.printName() // obj
obj.printObj() //{name: "obj", printName: ƒ, printObj: ƒ}

`this` within method of an object - arrow function

The value of this in an arrow function is always the value of this in the parent non arrow function.

const obj = {
    name: "obj",
    printObj: () => {
        console.log(this); // this refers to the window
    }
}
obj.printObj() // Window {window: Window, self: Window, document: document, name: "", location: Location, …}

`this` within function body

function greet() {
    console.log(this);  
}
greet(); // Window {window: Window, self: Window, document: document, name: "", location: Location, …}

`this` when `new` keyword is used

function Game(inTitle) {
    this.title = inTitle;
    console.log(this); // Game {title: "pong"}
}

const game = new Game("pong");

`this` within callback in a method of an object - no arrow function

const fruits = {
    name: "fruits",
    fruits: ["apple", "mango", "banana"],
    printFruits() {
        console.log(this); // {name: "fruits", fruits: Array(3), printFruits: ƒ}
        this.fruits.forEach(function(fruit) {
            console.log(this); // Window {window: Window, self: Window, document: document, name: "", location: Location, …} * 3 times
        })
    }
}

fruits.printFruits();

`this` within callback in a method of an object - arrow function

const fruits = {
    name: "fruits",
    fruits: ["apple", "mango", "banana"],
    printFruits() {
        console.log(this); // {name: "fruits", fruits: Array(3), printFruits: ƒ}
        this.fruits.forEach((fruit) => {
            console.log(this); // {name: "fruits", fruits: Array(3), printFruits: ƒ} * 3 times
        })
    }
}

fruits.printFruits();

# this

what is 'this'?