JavaScript Object Notation

JavaScript provides some short hand ways to create custom objects and arrays. These short hand methods are very useful when dealing with custom objects or needing to define objects and behavior from a string (such as when using Ajax).

JavaScript Object Notation is what we are referring to. However you may see this more commonly referred to as "JSON".

Arrays

These two lines are identical

var array_one = new Array();
var array_two = [];


To represent an array we use the square brackets "[" and "]". Using it like we have in the sample above, we are simply creating a new array. Inside the square brackets, we can define the items we want. Or we can use the traditional Array techniques if desired.

var array_three = [ 1,2,3, "four" ];
array_three[array_three.length] = "five";
array_three.push("six");


Objects

These two lines do the same thing:

var obj_one = new Object();
var obj_two = {};


To represent an object, we can use the braces "{" and "}". These two lines will both create a new instance of an object. While we can use the traditional techniques for working with objects on either variable now, defining the properties of an object has a few more options.

Consider a custom object to represent a person:

//Traditional method
function Person() {
this.name = "";
this.age = 0;
}
var person_one = new Person();
//
//JavaScript Object Notation
var person_two = {
name : "",
age : 0
}


The difference between these two techniques is that the traditional approach defines a "class" and then instantiates an instance of that class. The second approach creates an instance of a new object and adds the needed properties. Both techniques have their place though. You'll see the JavaScript Object Notation style used when a "one-off" type object is needed.

Notice how the properties are defined. In the traditional style we use the "this" keyword (i.e. this.name = ""; ). In the JavaScript Object Notation style we use a different style (i.e. name : "" ). The pattern here is "property : value" with multiple properties separated by a comma. Where value can be any valid JavaScript value - literal numbers, strings, objects, functions, etc.

NOTE: Do not put a comma after the LAST property. Firefox can handle this, but Internet Explorer throws an error.

Putting it together

With that we can now create some complex objects:

var bob = {
name : "Bob Smith",
age : 30,
hobbies : [ "Computers", "Reading", "Gum Chewing" ],
toString : function () { return this.name; }
};


We have made use of simple properties, an array, and even an anonymous function (we'll talk about that in another post). And we now have an object representing Bob in one line of code (spread out over multiple lines for readability though.

Where you see this technique used often is when a function can take advantage of MANY arguments. Instead of defining the exact order the arguments take a single object can be used instead and the appropriate properties set.

function testIt(options) {
if (options.name) { alert("the name argument is: " + options.name); }
if (options.age) { alert("the age argument is: " + options.age); }
}


You will also see JavaScript Object Notation used extensively in Ajax scripting.

Passing a JavaScript Object Notation string

One final note. When you are passing around a JavaScript Object Notation string (such as a response from an Ajax call), you need to take care that your object is properly formed. The official way of declaring a property for an object is to put the name of the property in quotes:

var bob = {
"name" : "Bob",
"age" : 30
}


If this step is not done from inside executing JavaScript, there normally is no problems. But an object declaration in string format has to be treated slightly differently to convert that string into an object. At this time, you would likely see odd behavior.

This comes to light when using the $.ajax() method of jQuery.

// retrieved string one
{ name : "Bob", age : 30 }
//
// retrieved string two
{ "name" : "Bob", "age" : 30 }
//
//Ajax routine
$.ajax({
url : "mypage.php",
dataType : "json",
error : function () { alert("An error occured"); },
success : function () { alert("We were successful!"); }
})


In this sample, if our "mypage.php" routine returned the second string, we would see the success message. If it returned the second string, we would see the error message. Troubleshooting this situation would reveal that a) the string WAS retrieved, b) the request for "mypage.php" resulted in a 200 status code (which indicates everything went well), and c) we are still getting into the error function even though no apparent error occurred. The core problem is that the first string does not follow the official form of a JavaScript Object Notation string. Once we fix that, things work as expected.