Understanding the this Keyword in JavaScript

this is little bit confusing but today we will try to make it easy.

this at the top

when we use this directly. In browser it points to the window object. like if you want you can do this.alert() this will work same as the window.alert() or alert().

this in function

In function we have different behavior for normal mode and strict mode. In strict mode, this return undefined but in normal mode it points to global object in NodeJS and window object in browser.

var name = "Pawan";
function drinkWater(){
    console.log(this.name + " is drinking water");
}

// drinkWater function will print 
// Pawan is drinking water

this inside object datatype

using this inside directly points to global or window object. For example

let person = {
    firstname: "Pawan",
    lastname: "Kushwah",
    name: this.firstname + " " + this.lastname
}
console.log(person.name) // undefined undefined

since there is no value of firstname and lastname in the global object it returned me undefined. but if you use it inside object but inside the function. You get the object reference. For example

let person = { 
    firstname: "Pawan", 
    lastname: "Kushwah", 
    name: function () {
        console.log(this.firstname + " " + this.lastname)
    }
} 
console.log(person.name()) // Pawan Kushwah

What if use arrow function instead of the regular function in the name. we will get the same undefined undefined.

this in object with nested function

• In regular function

let factory = { 
    product: "biscuit",
    bake: function (){
        let material = "floor";

        function mix(){
            console.log("mixing " + material + " for " + this.product);
        }
        mix();
    }
} 
console.log(factory.bake()) // mixing floor for undefined

• but we use arrow function then.

let factory = { 
    product: "biscuit", 
    bake: function (){ 
        let material = "floor";
        const mix = () => {
            console.log("mixing " + material + " for " + this.product);
        }
        mix();
    }
}
console.log(factory.bake()) // mixing floor for biscuit

this in deattached mode

first of all what is deattached mode. when we use function after storing it in the variable we call it as deattached mode. For example

const laptop = {
    brand: "Dell",
    model: "Inspiron",
    price: 50000,
    discount: 10,
    finalPrice() {
        return this.price - (this.price * this.discount / 100);
    }
}
console.log(laptop.finalPrice());     // 45000
const price = laptop.finalPrice; 
console.log(price());                 // NaN

if you having difficulty in math you can skip math part. just focus on the finalPrice is function will return finalPrice of the laptop.

you can see that when we are using laptop.finalPrice function using price variable it is giving NaN. It is because price have deattached the finalPrice function and now finalPrice function don't have the access to the object variables.

Closures are something which do the similar thing but have the access to the variables.

Practice Time

Guess the output of the following.

const laptop = { 
    brand: "Dell", 
    model: "Inspiron", 
    advertise() { 
        console.log(`\({this.brand} \){this.model} is best laptop ever build in this world`) 
    } 
} 
const ad = laptop.advertise; 
ad();