Skip to content
Related Articles

Related Articles

Improve Article

JavaScript | Object Constructors

  • Difficulty Level : Basic
  • Last Updated : 31 May, 2019
Geek Week

Object: Object is the collection of related data or functionality in the form of key. This functionalities are usually consists of several functions and variables. All JavaScript values are objects except primitives.

Example:

var GFG = {
    subject : "programming",
    language : "JavaScript",
}

Here, subject and language are the keys and programming and JavaScript are the values.

Class: In JavaScript, a class is a kind of function. This classes are similar to normal java classes. The classes are declared with the class keyword like another OOP languages. The class syntax has two components: class declarations and class expressions.

  • Class declarations:
    class GFG {
        constructor(A, B, C) {
            this.g = A;
            this.f = B;
            this.gg = C;
        }
    }

    Here class name is GFG.

  • Class expressions:




    <script>
    class GFG {
        constructor(A, B) {
      
            // "this" refers to the address
            // of the keys "g" and "f"
            this.g = A;
            this.f = B;
        }
        print() {
            document.write(this.g +"<br>"+this.f);
        }
    }
      
    let gg = new GFG("JavaScript", "Java");
      
    gg.print();
      
    </script>

    Output:



    JavaScript
    Java

this keyword: The this keyword refers to the object it belongs to, like OOPs languages C++, C#, JAVA etc. this keyword is used in different ways in different areas. While executing a function in JavaScript that has a reference to its current execution context, that is the reference by which the function or data member is called. See the previous example.

Adding property to an object: The property can be added to the object by using dot(.) operator or square bracket.,

var GFG = {
    articles: 'computer science',
    quantity: 3000,
};

The GFG has two properties “articles” and “quantity”. Now we wish to add one more property name called subject.

  • Using dot (.) operator
    GFG.subject: 'JavaScript';
  • Using square bracket:
    GFG['subject']: 'JavaScript';

Here, subject is the property and ‘JavaScript’ is the value of the property.

Adding a property to Constructor: We cannot add a property to an existing constructor like adding a property to an object (see previous point), for adding a property we need to declare under the constructor.

function GFG(a, b, c) {
    this.A = a;
    this.B = b;
    this.C = c;
    this.G = "GEEK";
}

Here, we add a property name G with value “GEEK”, in this case the value “GEEK” is not passed as an argument.

Adding a Method to an Object: We can add a new method to an existing object.

GFG.n = function () {
    return this.A + this.B;
};

Here, the object is GFG.



Adding a Method to Constructor:

function GFG(a, b, c) {
    this.A = a;
    this.B = b;
    this.C = c;
    this.n = function () {
        return this.A + this.B;
    }
}

Here, in the last line a method is added to an object.

Constructor: A constructor is a function that initializes an object. In JavaScript the constructors are more similar to normal java constructor.

Object constructor: In JavaScript, there is a special constructor function known as Object() is used to create and initialize an object. The return value of the Object() constructor is assigned to a variable. The variable contains a reference to the new object. We need an object constructor to create an object “type” that can be used multiple times without redefining the object every time.

Example:

function GFG(A, B, C) {
    this.g = A;
    this.f = B;
    this.gg = C;
}

Here, GFG is the constructor name and A, B, C are the arguments of the constructor.

Instantiating an object constructor: There are two ways to instantiate object constructor,

1. var object_name = new Object(); or  
   var object_name = new Object("java", "JavaScript", "C#");
2. var object_name = { };

In 1st method, the object is created by using new keyword like normal OOP languages, and “Java”, “JavaScript”, “C#” are the arguments, that are passed when the constructor is invoked.
In 2nd method, the object is created by using curly braces “{ }”.

Assigning properties to the objects: There are two ways to assigning properties to the objects.

  • Using dot (.) operator
    object_name . properties = value;
  • Using third bracket:
    object_name [ 'properties'] = value;

Example 1: This example shows object creation by using new keyword and assigning properties to the object using dot(.) operator.






<script>
      
    // creating object using "new" keyword
    var gfg = new Object();
      
    // Assigning properties to the object
    // by using dot (.) operator    
    gfg.a = "JavaScript"
    gfg.b = "GeeksforGeeks";
      
    document.write("Subject: " + gfg.a + "<br>");
    document.write("Author: " + gfg.b );
</script>                    

Output:

Subject: JavaScript
Author: GeeksforGeeks

Example 2: This example shows object creation using curly braces and assigning properties to the object using third bracket “[]” operator.




         
<script>
  
    // Creating an object using "{ }" bracket
    var gfg = { };
  
    // Assigning properties to the object 
    // by using third bracket
    gfg['a'] = "JavaScript"
    gfg['b']= "GeeksforGeeks";
  
    document.write("Subject: " + gfg.a + "<br>");
    document.write("Author: " + gfg.b );
</script>

Output:

Subject: JavaScript
Author: GeeksforGeeks

Example 3: This example shows how to use function() with object constructor.




<script>
      
    // Creating object    
    var gfg = new Object();
  
    // Assigning properties to the object    
    gfg.a = "JavaScript"
    gfg.b = "GeeksforGeeks";
  
    // Use function()
    gfg.c = function () { 
        return (gfg.a +" "+ gfg.b);
    };
      
    document.write("Subject: " + gfg.a + "<br>");
    document.write("Author: " + gfg.b + "<br>");
      
    // Call function with object constructor    
    document.write("Adding the strings: "+ gfg.c() );
  
</script>                        

Output:

Subject: JavaScript
Author: GeeksforGeeks
Adding the strings: JavaScript GeeksforGeeks

Example: Another way to create a function using function name.




<script>
  
    // Creating object using "{ }" bracket
    var gfg = { };
  
    // Assigning properties to the object    
    gfg.a = "JavaScript"
    gfg.b = "GeeksforGeeks";
  
    // Use function()
    gfg.c = add; 
      
    // Declare function add() 
    function add() { 
        return (gfg.a +" "+ gfg.b);
    };
      
    document.write("Subject: " + gfg.a + "<br>");
    document.write("Author: " + gfg.b + "<br>");
      
    // Call function with object constructor    
    document.write("Adding the strings: "+ gfg.c());
  
</script>                    

Output :

Subject: JavaScript
Author: GeeksforGeeks
Adding the strings: JavaScript GeeksforGeeks

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :