Open In App

How to define instance and non-instance properties ?

Last Updated : 16 Jan, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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


Similar Reads

How to define all the list properties in one declaration using CSS ?
Sometimes a web page has good content for reading but the styling of the texts looks improper, so it becomes boring for the readers, and lastly, they leave the web page. But when they read articles with proper styling and lists they read them fully because of the good visuals stated there which keep them attracted to the article and readings. So wh
3 min read
How to define a container for an external (non-HTML) application using HTML5?
The approach of this article is to define a container for an external application by using a &lt;embed&gt; element in the Document. This is used for embedding external application which is generally multimedia content like audio or video . It is used as a container for embedding plug-ins such as flash animations. Syntax: &lt;embed attributes&gt; Ex
1 min read
Why Transition properties does not work with display properties ?
When we want to use transition for display:none to display:block, transition properties do not work. The reason for this is, display:none property is used for removing block and display:block property is used for displaying block. A block cannot be partly displayed. Either it is available or unavailable. That is why the transition property does not
2 min read
JavaScript Program to Access Non-Numeric Object Properties by Index
In JavaScript, we can access non-numeric object properties by their keys (property names) rather than by index, as objects are not indexed like arrays. Objects use key-value pairs to store data. But there are certain ways to achieve this using the properties of the objects. Approaches to access non-numeric object by Index in JavaScriptUsing Object.
2 min read
Define ng-if, ng-show and ng-hide
In this article, we will be explaining about ng-if, ng-show and ng-hide directive. ng-if Directive: The ng-if Directive in AngularJS is used to remove or recreate a portion of HTML element based on an expression.If the expression inside it is false then the element is completely removed from the DOM.if the expression is true then the element will b
3 min read
How to define the relationship between a document and the external resources?
In this article, we learn how to create the relationship between a document and the external resources by using the &lt;link&gt; Element. This tag is used to define a link between a document and an external resource. The link tag is used to link to external style sheets. This element can appear multiple times but it goes only in the head section. T
1 min read
How to define relationship between the result and the elements used in the calculation ?
In this article, we will learn how to define a relationship between the elements and the result of a calculation. The &lt;output&gt; element in HTML is a container element that can be used to display the output of a resulting calculation. The site can inject the result in this element. We will use this tag to specify the result. The form attribute
2 min read
How to define a number sections and sub-sections with section in CSS ?
In this article, we will learn how to define a number of sections and sub-sections with the section in CSS. The section tag defines the section of documents such as chapters, headers, footers, or any other sections. The section tag divides the content into sections and subsections. Counters in CSS are basically variables that can be used for number
2 min read
Define Selectors in jQuery and What are the types of selectors?
Selectors in jQuery: Selectors in jQuery are functions that primarily focus on selecting particular HTML elements and modifying them as per the action they need to perform. These selectors select particular HTML elements as per their name, element type, class, id, attributes or values of attributes, and much more. In other words, we can say that se
4 min read
What is the Difference Between define() and const Keyword in PHP ?
In PHP, both define( ) and const Keywords are used to define constants, which are identifiers with unchanging values. However, they have differences in terms of usage, scope, and flexibility. Syntax// Using define() functiondefine("CONSTANT_NAME", value);// Using const keyword (outside of class)const CONSTANT_NAME = value;Important PointsConstants
2 min read