Object Instances

What is an object instance? Put simply, it’s any reference created with the “new” keyword.

var foo = new Bar();

There are also some shortcuts for creating new object instances, for a handful of data types.

var myObject = {}, // short for new Object()
    myArray = [], // short for new Array()
    myRegex = /foo/; // short for new RegExp()

If you need to use a generic object, array, or regular expression, you’ll be operating on an instance of it, because that’s all that’s available. Javascript doesn’t offer primitive data types for those items. Those things don’t come in primitive types. What’s a primitive data type, you ask? We’ll get to that in another post.

Most things in javascript are objects. In the above code snippet, you see 4 different object types (including 1 custom object type), but all of them are descended from the Object base type. This means they all come with a base set of methods like hasOwnProperty() and toString(), along with some additional properties and/or methods (which we can collectively refer to as members), depending on the object type (e.g. Arrays have a length property, RegExp’s have an ignoreCase property and a test() method, etc). Custom data types can have any number of arbitrary, user-defined members. Depending on how an object is put together, it may provide some static members, or may require an instance in order to access those members.

What does it mean to declare a new instance of an object? It means that you’ve allocated a new chunk of memory to store the state of that object until you either destroy all references to the object instance and it’s been garbage collected, or until you refresh the page. Every object instance you create is one more chunk of memory you’ve allocated for the browser to hold onto. Once you’ve allocated the memory for it, adding new properties and methods is a snap:

myObject.newProperty = true;
myObject["newMethod"] = function () {};

The more members you add to your object instances, the more memory they’ll take up individually. As you can see, you have 2 different syntactical choices for how you want to define a new member on an object: dot notation or bracket notation. Is there a performance difference? According to this JSPerf test, yes there is, by several times, depending on the browser. So when should use each style?

Use dot notation when you know the name of the member you wish to get or set on your object instance. Use bracket notation when you need to get or set some member whose name is variable within your application. Here’s a usage example to highlight the differences:

var myObject = {};

myObject.myStaticPropertyName = true;

// This will set properties myDynamicPropertyName0, myDynamicPropertyName1, and myDynamicPropertyName2
for (var i = 0; i < 3; i++) {
    myObject["myDynamicPropertyName" + i.toString()] = true;
}

// Please don't ever do this. Eval is slow, and rarely ever necessary.
eval("myObject." + myDynamicPropertyName + i.toString() + " = true;");

Don’t forget that objects inherit from other objects via their prototypes, so if you ever need to iterate over the members of an object, and ensure that you’re dealing with just the members of this specific object instance (and not any members inherited from the prototype), you need to use the hasOwnProperty() method, which only checks against the current object’s properties, and does not traverse its prototype chain. Here’s an example:

var myObject = {
    prop1: true,
    prop2: true,
    func1: function () {}
};

for (var key in myObject) {
    // This loop will iterate over all members of myObject, including any that were inherited from the base
    // object prototype, so we want to make sure we only output those that are from this specific instance.
    if (myObject.hasOwnProperty(key)) {
        console.log(key, ": ", myObject[key]);
    }
}

Hopefully, this post has managed to answer most of the questions you may have regarding object instances in Javascript, how they behave, some of the terminology surrounding them, etc. If there’s anything that wasn’t covered here that you may still have questions about, feel free to ask them in the comments section.

Leave a Reply

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