How to define instance and non-instance properties ?

In this article, we will try to understand how we could define as well as create an instance and non-instanced properties in JavaScript.

Before analyzing instance and non-instanced properties let us first see the following syntax of creating a class in JavaScript since both instance and non-instance properties are defined on the class itself.

Syntax:

class class_name {
    constructor() {
        // variables.....
        // or...
        // methods.....
    }
    // Other variables or methods.....
}

Now that we have seen a basic structure/syntax which we could use for creating a class in JavaScript let us use this syntax for understanding as well as creating a class-based instance and non-instance properties.

Following the static example of a class which we have created by using the above syntax (Note in the below example we will not be accessing any variable declared inside the class, it’s just the demo class shown for understanding).

class Car {
    constructor () {
        this.car_name = "Ford";
    }
}

Instance Properties:

• Instance properties are those properties that are defined inside any class and require an instance that is created with the help of the class name itself.
• Without creating the instance of the class, we may not be able to access these properties which are defined inside the class.
• Even if we try to access these properties without creating an instance of the class, we may get “undefined” as an output stating that this particular property is not defined for the particular class for which the user is trying to search for.

Example: The following example will help us to understand the above-stated facts in a much better and efficient manner-

Javascript

<script>
    class Person {
        constructor() {
            this.Name = "ABCD";
        }
    }
    let person = new Person();
    console.log(person.Name); // Output: ABCD
    console.log(Person.Name); // Output: undefined
</script>

Output:

ABCD
undefined

Non-instance Properties:

• Non-instance properties are those properties that are defined inside any class and do not require any instance of the class for accessing them.
• They are directly accessible by just using the class name followed by the property name.
• One important thing here to note is that these properties are declared by using the “static” keyword which further cannot be declared inside the default constructor method.

Example: The following example will help us to understand the above-stated facts in a much better and efficient manner-

Javascript

<script>
    class Person {
        static Name = "ABCD";
    }

    let person = new Person();
    console.log(person.Name); // Output: undefined
    console.log(Person.Name); // Output: ABCD
</script>

Output:

undefined
ABCD