Creating objects in JavaScript (3 Different Ways)

JavaScript is a flexible object-oriented language when it comes to syntax. In this article, we will see the different ways to instantiate objects in JavaScript.
Before we proceed it is important to note that JavaScript is a class-less language and the functions are used in a way so that they simulate a class.

Using functions as class:

One of the easiest way to instantiate an object in JavaScript. We define a classical JavaScript function and create an object of the function using new keyword. The properties and methods of function are created using the this keyword.



filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
    // Function acting as a Class.
    function copyClass(name, age) {
        this.name = name;
        this.age = age;
        this.printInfo = function() {
            console.log(this.name);
            console.log(this.age);
        }
    }
  
// Creating the object of copyClass
// and initializing the parameters.
var obj = new copyClass("Vineet", 20);
  
// Calling the method of copyClass.
obj.printInfo();
</script>

chevron_right


Output:

Vineet
20

Explanation: A class in OOPs have two major components, certain parameters and few member functions. In this method we declare a function similar to a class, there are two parameters, name and age ( the this keyword is used to differentiate the name and age of the class to the name and age of the arguments that are being supplied.) and a method printInfo that prints the value of these parameters. We then simple create an object obj of the copyClass, initialize it and call it’s method.

 

Using object literals:



Literals are smaller and simpler ways to define objects. Below we instantiate an object exactly same as the previous one just with the object literal.

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
    // Creating Object.
    var obj = {
        name : "",
        age : "",
        printInfo : function() {
            console.log(this.name);
            console.log(this.age);
        }
    }
  
// Initializing the parameters.
obj.name = "Vineet";
obj.age = 19;
  
// Using method of the object.
obj.printInfo();
</script>

chevron_right


Output:

Vineet
20

Explanation: This method works same along the line of the previous one but instead of bundling the parameters ( name and age ) and the method ( printInfo ) inside of a function, we bundle them in the object itself, initialize the object and simply use the methods.

 

Singleton using a function:

The third way presented is a combination of the other two that we already saw. We can use a function to define a singleton object.

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
    // Creating singleton object.
    var obj = new function() {
        this.name = "";
        this.age = "";
        this.printInfo = function() {
            console.log(this.name);
            console.log(this.age);
        };
    }
  
// Initializing object.
obj.name = "Vineet";
obj.age = 20;
  
// Calling method of the object.
obj.printInfo();
</script>

chevron_right


Output:

Vineet
20

Explanation: This is a combination of the previous two methods, we bundle the methods and parameters inside a function but don’t declare a separate function for it (Like copyClass in method 1). Instead we simple use the function structure to declare a object.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.