this Js

Intro

Contrary to popular belief, JavaScript technically does not have classes; classes were introduced to JavaScript with ES6. They provide a more convenient and clearer syntax to create objects and handle inheritance compared to the traditional prototype-based approach. However, it is important to understand that JavaScript classes are essentially syntactical sugar over their existing prototype-based inheritance.

Objects in JavaScript

Below is how you create/declare an object literal in JavaScript.

javascriptCopy code// Define an object using object literal syntax
const user = {
    username: "hitesh",
    loginCount: 8,
    signedIn: true,

    getUserDetails: function() {
        console.log(`username : ${this.username}`); // 'this' refers to the current object context
    }
}

console.log(user.getUserDetails()); // Outputs: username : hitesh

Objects are a great tool, but what if we need to create more than one user ID? Do we have to create a new object again?

No, we can use a constructor function, which will help us create new instances of the same object.

javascriptCopy codefunction User(username, loginCount, isLoggedIn) {
    this.username = username;  // 'this' refers to the new object being created
    this.loginCount = loginCount;
    this.isLoggedIn = isLoggedIn;

    // return this; // This is implicit and not needed in constructor functions
}

const userOne = User("aman", 12, true);
console.log(userOne); // Outputs: undefined (without 'new', 'this' refers to the global object)
const userTwo = User("malik", 123, false);
console.log(userOne); // Outputs: undefined (userOne is still undefined)
console.log(this.username); // Outputs: malik (global context is polluted)

To solve this, we just add the new keyword when calling the constructor function.

javascriptCopy codeconst user1 = new User("aman", 12, true);
console.log(user1); // Outputs: User { username: 'aman', loginCount: 12, isLoggedIn: true }
const user4 = new User("malik", 123, false);
console.log(user1); // Outputs: User { username: 'aman', loginCount: 12, isLoggedIn: true }
console.log(user4); // Outputs: User { username: 'malik', loginCount: 123, isLoggedIn: false }

NOTE: Steps of constructor calling

An empty object is created.
The constructor function is called with the new keyword.
The this keyword is assigned to the new object.
The new object is returned implicitly.

The this Keyword

The this keyword refers to the object that is currently executing the function. Its value depends on how the function is called, and it provides a way to access the properties and methods of the object in which the function is defined.

javascriptCopy codeconst user = {
    username: "hitesh",
    loginCount: 8,
    signedIn: true, 

    getUserDetails: function() {
        console.log(`username : ${this.username}`); // 'this' refers to the current object context
    }
}

console.log(user.getUserDetails()); // Outputs: username : hitesh

If you print the context globally, it will be empty as none is provided. However, if you do the same in a browser console, you will see a plethora of global properties.

javascriptCopy codeconsole.log(this); // Outputs: {} in Node.js, 'window' object in a browser

Common Pitfall

If you mistakenly refer to a variable without this in a method, it will throw an error because the variable is not defined in the local scope of the function.

javascriptCopy codeconst user = {
    username: "hitesh",
    loginCount: 8,
    signedIn: true, 

    getUserDetails: function() {
        console.log(`username : ${username}`); // Throws a ReferenceError because 'username' is not defined
    }
}

Changing username to this.username correctly refers to the object's property.

JS classes and objects