JS Tidbits: Static Object Object

2 comments | Posted: 26 November 06 in Tutorials, by Cody Lindley

What is the object object? Well, it’s an object. Clear as mud, I know. To understand what an object object is, a novice JavaScript programmer should really rid themselves of any OOP knowledge they might have. Just forget about that OOP stuff for now, and proceed.

If you have read my article pertaining to datatypes then you are aware that JavaScript has four of them. These datatypes are: number, string, boolean, and object. As of late, among the different variations (Objects, Arrays, Functions, RegExps, Dates and Errors) of the object datatypes, the object object seems to be in the spotlight. That is to say, the object object is getting a lot of use these days in the world of JavaScript programming.

In JavaScript we can create an object object in two ways, the literal way and the non-literal way. Being that this is the year 2006, I would imagine most of you have seen the object object defined using a literal expression statement, like so.

var carObject = {
frontLeftTire:1,
frontRightTire:1,
backLeftTire:1,
backRightTire:1,
countAndReturnTireTotal:function (){return this.frontLeftTire + this.frontRightTire + this.backLeftTire + this.backRightTire}
}

The non-literal expression statement would look like this.

var carObject = new Object();
carObject.frontLeftTire = 1;
carObject.frontRightTire = 1;
carObject.backLeftTire = 1;
carObject.backRightTire = 1;
carObject.countAndReturnTireTotal = function(){return this.frontLeftTire + this.frontRightTire + this.backLeftTire + this.backRightTire};

Regardless of format one of the two code examples above will define a javascript object object. More accurately stated, it will create a static object object which can be identified as carObject. It’s static in the sense that I have no plans of creating another instance of the carObject. If I was thinking about creating multiple objects then we would be thinking in OOP terms, and we are not doing so in this segment. So, what is the point of creating a static object object?

As I see it, there are four explanations (maybe more) as to why a JavaScript programmer might use the object object in a less than traditional object oriented way.

Reaons 1:
The first reason would be to create an isolated scope (a namespace) in order to avoid possible conflicts with JavaScript written in the window object scope. This is typically done by programmers who have limited control over what is being defined in the window object scope.

Reason 2:
The second reason would be to use an associative array and the array notation to access the properties of an object object. Remember that an object object in theory is not all that different from an array object. They both represent a collection of values. In the case of an array object the values are considered numerical. In the case of an object object the values are named values. The names in an object object are known as properties. Lets again look at the carObject object.

var carObject = {
frontLeftTire:1,
frontRightTire:1,
backLeftTire:1,
backRightTire:1,
countAndReturnTireTotal:function (){return this.frontLeftTire + this.frontRightTire + this.backLeftTire + this.backRightTire}
}

The carObject has five properties. If it’s not obvious, the first property of the carObject object has a value of 1, and is given the name identifier of frontLeftTire. Do you know what datatype the value of frontLeftTire holds? I hope you are thinking, the number datatype.

The last property of the carObject object is a function. Yes, even a function can be consider a property. If we had our OOP hat on, this particular property would be considered a method of the carObject object. Since we are not thinking in terms of OOP just yet, I think is easier to consider all values properties regardless of what the value may be. The reason being that object object can not only hold primitive datatypes and functions, but also other object objects.

Now, what makes the carObject an associate array? Well, it’s the fact that you can access the properties of the carObject in an array like manner. For example:

alert(carObject['frontLeftTire']); //alerts the number 1

The code above demonstrates the array notation (['property']) used to access the properties of the carObject object. This format comes with the added benefit of accessing properties with a string and not an identifier. Since a string is being used here, the string itself can be manipulated by JavaScript during runtime. This is in contrast to identifiers, which are not a datatype and must be expressed literally in a program. However, identifiers are useful too. Using the dot "." operator and an identifier we can access properties in a dot notation fashion. For example:

alert(carObject.frontLeftTire); //alerts the number 1

Reason 3:
The third reason to use an object object would be to keep large JavaScript programs organized from a contextual and semantics perspective. This reason is rather self-explanatory if you consider how we might store the values found in the carObject without using an object object.

var carObject;
var frontLeftTire=1;
var frontRightTire=1;
var backLeftTire=1;
var backRightTire=1;

function countAndReturnTireTotal (){return this.frontLeftTire + this.frontRightTire + this.backLeftTire + this.backRightTire}

Without using an object object to store my carObject values, I have no relationship between the carObject and its properties. Semantically speaking, my carObject values are now being stored in the window object. Does that make sense?

window.countAndReturnTireTotal();

However, using an object object I could semantically invoke the function in a more logical manner with the following code.

carObject.countAndReturnTireTotal();

In general, accessing related properties makes more semantic sense in the context of an object object, instead of the context of an unrelated objects scope (window object scope).

Reason 4:
The forth reason to use an object object would be because I want my code written in JSON. I’m not going to explain JSON here, but for an in-depth explanation check out the JSON homepage. What I will say about JSON is that it’s really just a JavaScript object object being used as a lightweight data format, and not necessary as a mechanism for OOP. Think of it simply as XML data written in a programming language instead of in a tag language. It should also be stressed that JSON uses strings instead of identifiers to name properties.

Discuss This Topic

  1. 1 Phil Schalm

    If I may be picky, an Object literal is not, in fact, an associative array. While it may function like an associative array in other languages, the bracket notation (someObject[‘identifier’]) is merely an alternative to the dot notation (someObject.identifier).

     
  2. 2 Cody Lindley

    @Phil – I don’t believe I specifically said that it was. I was just trying to point out that an object object (literal or not) can be used like an associative array. And in fact, this is why you might choose to use an object object.

     

Comments closed after 2 weeks.