JavaScript Object Shorthand and JSON

I’ve Moved!

In order to demonstrate my code better I needed the ability to execute JavaScript on my pages and I wanted a simpler solution to offering source files than what Box.net offered.

I’m now over at http://blog.josh-davis.org.

You can get to this post on my new site at http://blog.josh-davis.org/2007/05/01/javascript-object-shorthand-and-json/

Original Post

One great feature of JavaScript is the ability to create objects through shorthand (or more precisely “object literal notion”) rather than writing the full syntax of a function block and using the prototype object. This ability to use shorthand is the basis of JSON, but is also useful to making code less verbose – albeit somewhat less readable.

Here’s an example of a full object declaration and construction call including methods added through prototype:

function Animal(legsIn,armsIn)
{
    this.legs = legsIn;
    this.arms = armsIn;
}
Animal.prototype.alertLegs = function()
{
    alert(this.legs);
};
Animal.prototype.alertArms = function()
{
    alert(this.arms);
};
var chimp1 = new Animal(2,2);

Here’s a structurally similar object instance created using object literal notation (the line breaks and tabs are for readability and are not required):

var chimp2 = {
        legs:2,
        arms:2,
        alertLegs:function() {
            alert(this.legs);
        },
        alertArms:function() {
            alert(this.arms);
        }
    };

Now if you call chimp1.alertArms() or chimp2.alertArms() you’ll get the same response: an alert box containing the number 2. However, I should note that chimp2 is not an instance of Animal. If I were to add additional properties or methods to Animal you would not be able to use those methods in the context of chimp2 where you would in the context of chimp1. I should also note that the property and method names can be quoted or not (I believe the JSON standard is quoted).

Arrays can be similarly represented. You save less, but since I’m mentioning these shorthands in the context of JSON I feel I should include Arrays.

To create an instance of an array containing elements using the built-in JavaScript Array class you could do something like this:

var array1= new Array('el1','el2','el3');

The shorthand of this would look like this:

var array1= ['el1','el2','el3'];

It saves you a little bit, but obviously not a lot. However, if you create a large data structure which includes objects and arrays it become very helpful, and more elegant, to have this shorthand available. An example of this might look something like this:

var pets = {
        dogs: [
            {name:'max',breed:'lab'},
            {name:'fido',breed:'mut'}
        ],
        cats: [
            {name:'fluffy',breed:'longhair'}
        ]
    };

This example show that I have two types of pets – dogs and cats – with two dogs and one cat.

How does JSON fit into this? Well, when you make an XMLHttpRequest you’ll get a string containing your data structure made up of objects, arrays, strings, numbers, booleans, and nulls – but all represented within a string. To actually get your data into a JavaScript object you’ll need to run something like this: var myJSON = eval(JSONString);. By using the object literal notation you will only be getting your relevant data rather than the class declarations which in turn will make the string smaller and the evaluation of the string much faster.

---

Possibly related posts: (automatically generated)

• JSON
• JSON pros and cros
• ColdFusion 8 provides built-in support for JSON. There is also a CFC librar…