Four Ways To Create JavaScript Objects

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 details.

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}

So 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.

document.write(student.name);

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 "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, we can write.

document.write(ross.name);
document.write(david.name);

Let me give you another example with a twist.

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

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

document.write(window.registrationNo);

So 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.

Object.create()

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 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 enumerable, writable, and configurable 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);
document.write(ross.getStudentDetails());

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!