JS Tidbits: Datatypes, Object Object vs. Array

1 comment | Posted: 12 November 06 in Tutorials, by Cody Lindley

Datatypes are the types of values that can be represented and manipulated in a programming language. JavaScript has only 4 datatypes, or 6 if you are counting the simple (primitive type) datatypes null and undefined. In my opinion, and for the sake of logic, its better to think of JavaScript as only having four datatypes.

The first three datatypes are string, number, and boolean. You may already be familiar with these simple datatypes. The fourth and more complex datatype is an (composite type) object. I won't be spending time here explaining the first three datatypes (string, number, and boolean) given the initial low level of comprehension required to understand what a string is (Ex: var mystring = 'text';), what a number is (Ex: var myNumber = 1;), and what a true or false boolean is (Ex: var myBoolean = false;). In this article we are going to focus on objects, specifically the differences between an array object and the object object

The object datatype is complex because it represents several types of values. These values are Objects, Arrays, Functions, RegExps, Dates, and Errors. Each of these values are considered to be of the datatype object.

If you remember back to the article about object literals, I mentioned what is rightly called the object object. With what you now know (re-read the last paragraph) about datatypes, the object object should make perfect sense. That is, it should make perfect sense because in JavaScript there is an object datatype, called object. Still confused? Take into consideration the array object.

var myArray = new Array();

The above expression is what is known as an expression statement. This expression statement defines a variable, with the identifying name of myArray and then assigns a value to it that is an empty array object. So, we could call myArray an array object.

Now back to the object object. Just like the array object, JavaScript has object objects. Keep in mind that both the array and the object belong to the object datatype. Below is an object object.

var myObject = new Object();

The JavaScript expression statement above defines a variable, with the identifying name of myObject, and then assigns a value that is an empty object object.

You might be wondering, as I once did – What is the point of an object object? You may grasp the concept and function of an array object, but what exactly is an object object?

I am going to explain this in words first, and then show the difference between an array object and an object object using code. Don’t worry – this is really not that hard to understand once you see the differences in the context of a code example.

The array object and the object object are very similar. The array object is used to represent an ordered collection of numbered values. While the object object is used to represent an unordered collection of named values, or what is known as an associative array. I might also add that an object object will allow complex relationships among the values it may hold. With a verbal explanation now out of the way let’s look at the difference in the context of real JavaScript code.

The code below shows an object object, called carObject, written in a literal format. Notice the declaration of named values, often called object properties or fields.

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

In the carObject Object code above you will notice that the carObject has contained inside of it a collection of values called properties. Really this is not that different from an array object.

Let’s look at an array object called carArray. The code below is an array object written in a non-literal format with the same property values defined in the carObject. Notice the use of numbers to identify and assign the values in the carArray object, or more specifically the fact that carArray[0] = 1.

var carArray = new Array();
carArray[0] = 1;
carArray[1] = 1;
carArray[2] = 1;
carArray[3] = 1;
carArray[4] = function countAndReturnTireTotal(){return carArray[0] + carArray[1] + carArray[2] + carArray[3]};

The fact that I place the same property values found in the carObject in the carArray as number values (instead of named values) is actually rather silly. It is silly because my intention for the properties of the carObject make sense in the context of an object object, but not necessarily an array object. That is, unless my intent was to store the values as simple number values. If this does not make sense I want you to consider how you might go about invoking the function found in carArray[4]. Additionally, for the carArray is there a backRightTire? Not only that, how would the function found in the carArray, if invoked, access values stored in the other parts of the array object.

If it is not obvious by now, the array object is useful for storing large sets of data that do not have complex relationships. Complex relationships are for object objects, like in my carObject object. For instance, does it, or does it not make sense that the carObject should have four named values identifying each tire of a car. Had we used an array object to represent a car, its attributes would be identified by number and not by name.

In my next Tidbit article I will explain the object object in more detail. The point of this article was to explain the JavaScript datatypes, and the different between an array object and an object object.

Discuss This Topic

  1. 1 Nate K

    Coming from doing OOP programming in PHP, this was easy to understand (in light of JavaScript). I think you did an excellent job explaining the differences, and highlighting the power of each.

    Looking forward to your future articles.

     

Comments closed after 2 weeks.