A Programmer’s Tour Of Javascript


In classical object-oriented programming languages (Java, C++, Ruby, etc), an object is created by using a class as a template. The methods and properties of the class – thus the object – are static; they cannot be changed at runtime. This is not even close to how JavaScript objects work.

Instead, JavaScript objects are hashes. A hash is a collection of key/value pairs, where the key is a string. You can also think of them as an associative array: an array that is indexed by a string, rather than a number. (Of course, objects are not “really” associative arrays; they have none of the methods of the Array class, and don’t have a length property.)

This makes JavaScript objects completely dynamic. The members of an object are simply key/value pairs. The object’s properties and methods are simply its keys (or string indexes, if you want to look at it that way). A property has an object or primitive as its value, while a method has a function object as its value. This means that adding a member to an object is simply a matter of specifying a key/value pair. You can do this after the object has already been created.

There are essentially three ways to create an object in JavaScript. Most objects are created using object literal syntax. This is a pair of curly braces, enclosing colon-delimited key/value pairs, with each pair separated by a comma:

var objectIdentifier = {
   firstKey: value,
   secondKey: value,
   lastKey: value

This syntax is so simple and convenient that it inspired JSON, the widely-used data interchange format.

JavaScript objects support both the dot operator, and the array index operator (the square bracket syntax). This can make for some pretty weird-looking code. For example, this is perfectly valid JavaScript syntax:

> /[a-zA-Z0-9]*/i['test']("blah");

Because member names are just strings, they can have characters that are illegal to use in identifiers (such as whitespace or reserved words). In that case, the properties must be quoted when they are specified, and you can’t use the dot operator (for obvious reasons).

But as a general rule, you should use the dot operator. This makes your code shorter and easier to read. It also makes it more comprehensible to programmers coming from other languages. You should only use the array index operator if you intend to use the object as a bona fide associative array.

When you create objects using the object literal syntax, all of its keys are enumerable. This means that they can be iterated using JavaScript’s for/in loop. In the section on arrays, I mentioned that you should not use arrays with this loop construct. But it is ideal for looping over the properties of an object. Here’s a basic example:

// Logs all the enumerable properties of obj
for (prop in obj) {
  console.log(prop + ": " + obj[prop]);

The fact that objects are hashes has one huge side effect: JavaScript members do not have access modifiers. All properties of objects are public. (They are like a C++ struct in this way.) There are ways to create private variables, but they involve closures, so that topic will have to wait until I talk about functions.

There are two other ways to create objects. The first is to use a function as a constructor, using the new keyword. To understand how this works, we should first talk about functions as first-class objects.

The final way to create objects is to use the Object.create() method. But to understand what that method does, we first have to understand prototypes; to understand prototypes, we need to understand constructors; and to understand constructors, we need to understand functions.

I’ll let you guess what the next topic is going to be.


About Karl

I live in the Boston area, and am currently studying for a BS in Computer Science at UMass Boston. I graduated with honors with an AS in Computer Science (Transfer Option) from BHCC, acquiring a certificate in OOP along the way. I also perform experimental electronic music as Karlheinz.
This entry was posted in JavaScript, Programming and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s