Over a million developers have joined DZone.

Four Ways to Create JavaScript Objects

DZone 's Guide to

Four Ways to Create JavaScript Objects

Four ways to create JavaScript objects.

· Web Dev Zone ·
Free Resource

Today, we are going to learn about creating JavaScript objects using various methods given below.

  1. Object Literals.
  2. Constructor Functions.
  3. Object.create().
  4. ECMAScript 6 Classes.

Let us understand them in detail.

Object Literals

I'd say this is one of the simplest and the most common ways to create objects in JavaScript. We just simply define the properties and their values inside curly brackets like given below.

var student = {name: 'Ross', rollno: 1}  

Here, I've created a new object with two properties — name and rollno. We can confirm it by printing out the values of the created object.


Easy enough, isn't it?

Constructor Functions

What if we want to create multiple instances with the same set of properties/structure? And, we also don't want to endup writing multiple lines of object literals...

var ross = {name: 'Ross', rollno: 1}   
var david = {name: 'David', rollno: 2} var atul = {name: 'Atul', rollno: 3}  

To solve the problem, let's create a function.

funtion Student(name,age)  
{ this.name = name; this.age = age; }   

The this keyword refers to an object. That object is whatever object is executing the current bit of code. By default, that is the global object. In a web browser, that is the Windows object.

Notice that this is just a simple function and nothing special. The new keyword is followed by the function name to initialize the object.

var ross = new Student('Ross',1);   
var david = new Student('David',2);  

When we use the new keyword with a function name, an empty object gets created and the this keyword used inside that function holds the reference to that object.

Now, we don't need to pass the property name along with its value. To print the same output, we can write.


Let me give you another example with a twist.

function Student(registrationNo) {  
    this.registrationNo = registrationNo;  
var amit = Student(123);  

It will print undefined. Notice, I didn't use the new keyword with the function name on purpose. So, all the properties get attached to the Windows object. 


The function, like Student, is commonly called constructor function. But you can see that there's really nothing special about it. It is just a function. This is a very common pattern for creating objects in JavaScript.


So far, we've looked at two different ways of creating objects using object literals and using constructor functions with the new keyword. These are just basically syntactic sugar for object.create.

We could create the same objects using the object.create() syntax as follows.

var ross = Object.create(Object.prototype, {  
    name: {  
        value: 'ross',  
        enumerable: true,  
        writable: true,  
        configurable: true  
    rollno: {  
        value: 1,  
        enumerable: true,  
        writable: true,  
        configurable: true  

For each property, we are setting the value and the enumerable, writable, and configurable properties to true. This automatically gets done for us when using either object literals or constructor functions.

You may be wondering what these attributes are. So, I will be writing another blog to explain all these properties and inheritance in JavaScript.

ECMAScript 6 Classes

For browsers that support it, the ECMAScript 6 specs now provide the functionality of creating objects using a class structure that is similar to statically typed languages like C#, .NET, and Java.

Again, this is just syntactic sugar on top of the existing object creation functionality. So, to create our object using a class, we would do something like this.

class Student {  
    constructor(name, rollno) {  
        this.name = name;  
        this.rollno = rollno;  
    getStudentDetails() {  
        return "Student: " + this.name + ", Roll No: " + this.rollno;  
var ross = new Student("Ross", 1);  

If you enjoyed this post, I’d be very grateful if you’d help it spread by emailing it to a friend, or sharing it on Twitter or Facebook. Thank you!

javascript ,object ,literals ,web dev ,tutorial

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}