In JavaScript there are two different ways to create an object and it can be hard to know which one’s best. In this article I will explore the cons and pros of each approach and recommend one way to do it.

(Spoiler alert: I will recommend the Object Literal Notation).

What’s an object anyway?

Since JavaScript is an object-oriented language it contains objects. But what is an object and what do you use it for?

You can think of objects as containers of other things. Those things can be different kinds of variables (values) or functions. When those are part of an object they’re called properties and methods.

Keeping it organized

Objects are useful for keeping things organized. It keeps similar things in one place. Think for example about the Math Object which is an object that’s built into the JavaScript language. It contains a lot of methods for performing all kinds of mathematical operations and it also contains useful values such as the value of Pi.

There are several other built in objects in JavaScript such as Array, Date and Image but you can also roll your own.

Two different ways

There’s two ways of creating objects in JavaScript. The first one is probably the one that looks most familiar for developers coming from other object oriented languages such as C++ and Java. I call this approach Classical Notation.

Classical Notation

With the classical notation you create a new object by using the new keyword and a constructor.

1

var obj = new Object();

This creates a new object that you can assign methods and properties to.

1
2
3
4
5
6

var obj = new Object();
obj.name = ’Apple’;
obj.type = 'Fruit';
obj.eat = function() {
  // method code
};

Object Literal Notation

The other way of creating objects is by using the Object Literal Notation.

1

var obj = {};

It’s less code but creates the same thing, an empty object. You can now add properties and methods to it just as you would with the Classical Notation.

1
2
3
4
5
6

var obj = {};
obj.name = ’Apple’;
obj.type = 'Fruit';
obj.eat = function() {
  // method code
}

Ok, you might think now. The code is a bit shorter but what’s the big deal?

There’s in fact another benefit of using this approach and that’s that you can create the properties and methods directly when creating the object:

1
2
3
4
5
6
7

var obj = {
  name: ‘Apple’,
  type: 'Fruit'
  eat: function() {
      // method code
  }
}

This is very convenient because it means that you can create full fledged objects on the fly without first having to create an object. In fact you don’t even have to store it inside a variable like we’ve been doing in the previous examples. If it’s an object that you only need to use once If it’s a fire and forget kind of thing, like when you need to supply an options object as an argument to a method, you can do it completely inline.

1
2
3
4
5
6
7

addFruit({
  name: ‘Apple’,
  type: 'Fruit',
  eat: function() {
      // Method code
  }
});

Pretty neat ey? Check out Future Proof Your Methods With Options Objects to read more about why this is useful.

If you ever been using the data format JSON, this notation probably looks very familiar to you. That’s because JSON actually is an Object Literal, sans the methods of course.

Which approach to use

My preferred approach is definitely the Literal Object Notation and I’m not alone. It’s widely regarded the recommended approach.

In the JavaScript Patterns book by Stoyan Stefanov he concludes that the Literal Object Notation is better for the following reasons.

• It’s shorter to type
• It emphasizes that objects are mutable hashes
• Smaller Scope Chain = better performance

I would like to add “Being able to add properties and methods on the fly” to that list because I think that’s a thing that makes my coding more convenient.

But What About Arrays?

In JavaScript, Arrays are pretty similar to objects. In fact they are a special kind of object with some added functionality that doesn’t exist on regular objects. I won’t get into the details here, just think of them as special objects.

The same techniques apply to arrays as regular objects. You can create them in two different ways.

1
2
3
4
5

// Classical Notation
var myArray = new Array();

// Array Literal Notation
var myArray = [];

You can probably guess by now which my preferred method is! Yeah, you guessed that one right, it’s the Literal Notation.

Summary

There are two different ways of creating objects in JavaScript.

• Classical Notation
• Literal Object Notation

The recommended way of creating objects in JavaScript are:

Always create objects using the Literal Object Notation

• It requires less code
• You can assign properties and methods on the fly
• Smaller Scope Chain = better performance

I hope that I’ve managed to convince you to always use the Literal Object Notation. Not that anything bad is going to happen if you don’t. It’s just a better approach.

References

JavaScript Patterns by Stoyan Stefanov