Objects: Literally Speaking...

[SlightlyLoony]

If you've written anything at all in JavaScript (or any other programming language, for that matter), you've been using literals — even if you didn't know you were. For instance, in this little script:

var a = 1;
var b = 'abcdefg';
var c = true;

...we have a numeric literal (the 1), a string literal (the 'abcdefg'), and a boolean literal (the true). Each of these is a way to write a particular kind of value as text. My colleague at right says "Yeah, yeah, yeah — tell me something I don't already know (and I know everything)!" Well, how about this? JavaScript has three other kinds of literals as well, and these aren't found in many other popular programming languages. Did ya know that, carrot-top? Huh? Did ya?

The first of these I actually snuck into yesterday's example:

MyObj.prototype.average = function() {
       return (this.x + this.y) / 2;
}

That's an example of a function literal. JavaScript needs this new kind of literal because JavaScript functions are values the same way that numbers, strings, and booleans are values. In particular, you can assign a function value to a property, just as the example script does. Function literals have a particular form:

function(<zero>) {<javascript>}

By writing text inside a JavaScript program that conforms to this, you can create any function object you want. There are lots of ways you can use function objects created via function literals. For instance, they can be called anonymously, they can be assigned to properties, and they can be the return value of a function. In our example yesterday, we assigned one to the average property of the prototype property on our constructor function.

The second additional kind of literal is the array literal, used to define (big surprise here!) arrays. These take the form:

[<zero>]

The simplest example of these is probably familiar to you:

var x = [];

This assigns an empty array to x. The literal values can be any valid JavaScript literal: numeric, boolean, string (as seen above) — or even a function literal or an object literal! Here's an example that creates an array with four elements:

var x = [5, true, 'abc', 67.993];

JavaScript also has another kind of literal that's very useful when you're working with objects: the object literal. The object literal format is a little more complicated to describe, but once you understand it you'll see that it's actually very straightforward. At the highest level, the object literal format is:

{<zero>}

You've probably seen the simplest example of this before:

var x = {};

That little script assigns an empty object (that is, an object with no properties) to x. Here's how a property is specified in an object literal:

<property>:<property>

An example may make this clearer:

var x = {name:'Carrot-Top',attitude:'Superior',age:0.75,human:true};

Now we're assigning a more complex object to x, one with four properties. The property names can have quotes around them, to — but they're only necessary if your property name doesn't conform to JavaScript's identifier format (has only letters, numbers, dollar signs, and underscores, and doesn't start with a number). If you do quote your property names, they can contain any characters at all (so long as they don't form a reserved word). The property literal value can be any valid JavaScript literal: numeric, boolean, string (as seen above) — again, even a function literal or an object literal!

If you're like me, that object literal example is a bit hard to read — but it doesn't have to be. You're free to use whitespace and even comments within that object literal. For instance, I could rewrite my example like this:

var x = {
       name:         'Carrot-Top',
       attitude: 'Superior',
       age:           0.75,                     // in years...
       human:       true                       // we're really not entirely sure about this one...
};

One thing worth noting here: when object literals are written like this, people often get confused by the fact that there is no comma after the last property. If you do put a comma there, in most JavaScript environments (including our server-side script) you'll get an error. Just remember that the comma separates multiple property values; it doesn't terminate them.

I noted above that the properties defined in object literals could also use function literals and object literals. Here's an example using a function literal, rewriting the prototype assignment from yesterday's example:

MyObj.prototype = {
       x: null,
       y: null,
       average: function() {
               return (this.x + this.y) / 2;
       }
};

That code has exactly the same effect as the original code in yesterday's example.

Finally, I'll leave you with an example that combines everything we've talked about here. If you can puzzle your way through this and predict what it will log, then you know you've got a good understanding of these object literal beasties:

var x = {
       a: 5.6,
       b: {
               c: true,
               d: 'My Name',
               e: [
                       true,
                       false,
                       5.6,
                       function(x, y) {
                               return x * y;
                       }
               ]
       },
       f: ['alpha', 'bravo', 'charlie', 'delta']
};
JSUtil.logObject(x);

Mozilla has a nice guide to JavaScript literals...