Creating JavaScript Objects

Objects are JavaScript’s most important data type. They behave much like associative arrays (or hashes) in other languages in that they allow you store and retrieve values by name. In this tutorial, we will look at what a JavaScript object really is, and at three different ways of creating them and the advantages of each […]

This article was posted by Independent Software, a website and database application development company based in Maputo, Mozambique. Our website offers regular write-ups on technical and design issues, ranging from details at code level to 3D Studio Max rendering. Read more about Independent Software's philosophy, or get in touch with Independent Software.

Objects are JavaScript’s most important data type. They behave much like associative arrays (or hashes) in other languages in that they allow you store and retrieve values by name. In this tutorial, we will look at what a JavaScript object really is, and at three different ways of creating them and the advantages of each approach.

How to use objects

Since objects are mappings of textual keys to values, they can be used as dictionaries and hashes. The values stored in an object can be primitive values, but they can also be objects in their own right or even functions. In fact, any JavaScript value that’s not a primitive value like a string or number, true , false , null  or undefined  is an object. Due to their similarity to associative arrays, objects are used to simulate the structs and classes from other languages. It should be noted that objects aren’t really classes since their method of inheritance doesn’t quite work the same way, but they do support inheritance.

Prototypical inheritance

Whenever you create an object, through whichever method, the new object will inherit (read: copy) the properties of a so-called prototype object. The new object’s prototype property will hold a reference to that object. Since the properties are merely copied, this means that changing the value of a property in the child object does not modify that value in the parent object. There isn’t such a thing as an instance of a class; creating an object merely results in a collection of copied and independent properties.

Objects created using the simplest approaches (object literals and the new keyword, as discussed below), will automatically use the Object.prototype object as their prototype. This object (which itself has no prototype) includes functions like toString() , toValue()  and hasOwnProperty()  which will, through prototypical inheritance, automatically be copied to the new object.

Creating objects

There are three ways to create an object: adding an object literal to your code, using the new keyword, and calling Object.create() , although the latter is only available in ECMA Script 5.

Creating a JavaScript object using an object literal

Creating an object by writing out an object literal is the simplest way of creating an object, and also what happens when you take some JSON code containing objects and evaluate it. Some examples of object literals include:

The object property names may be written without quotes as long as they qualify as variable names. However, since internally they are strings, you can write whatever you want as long as you use quotes:

When referencing a property of an object, you can use either the “dot” notation, as long as the property name qualifies as variable name, or the brackets notation for any string:

When you use an object literal to create an object, its prototype will automatically and inevitably be set to Object.prototype, thus adding several functions to your new object, including toString() , toValue()  and hasOwnProperty() .

It should be noted that an object literal creates a new object whenever it is evaluated. When you place an object literal in a loop, a new object will be created each time the loop is executed which may turn out to be expensive.

Object keys are not ordered

Even though objects are similar to associative arrays, it is important to note that, unlike associative arrays in PHP, the array keys are unordered. This means that you cannot loop through the keys in an object and assume that you’ll get them in alphabetic order. Some JavaScript implementations enforce alphabetic order, and some don’t – the specification does not require them to.

Thus, if you do:

then there is no guarantee that the x will contain the names of the object’s fields either in alphabetical order or in the order they were created.

Creating objects with the new keyword

A slightly different approach to creating objects is using the new  keyword. To do so, you must provide new  with a function, which is called the object constructor. You can provide your own constructor, or use one of several constructors predefined in JavaScript:

The constructor function provided will be stored in the new object’s prototype  property. Note that writing new Object()  is the same as writing an object literal. Array()  and Date()  are prototype functions that add functions to the new objects, but ultimately also inherit from Object.prototype and thus the same functions are added to your new object that would have been added in case of an object literal.

Creating objects with Object.create()

ECMA Script 5 adds a new function, Object.create() . Its first argument allows you to specify the prototype of the new object to be created. Object.create()  is the only way to create objects that have no prototype and thus inherit no functions.

If you do want to inherit from Object.prototype, then you must write:

which is the same as:

Save

Save

Save

Save

Save

Did this article help you out? Please help us find more time to write useful guides & articles like this by donating a buck or two. It'll keep us coffee-fueled. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *