The Javascript Object

I use Javascript Objects quite frequently when I am developing web applications. These objects are very flexible and are easy to create and easy to manipulate. In this post, I will discuss how I use Javascript Objects to store and retrieve application data.

What is a Javascript Object

Javascript Objects are self-contained entities that can contain properties (variables) and methods (functions). I equate a Javascript Object to a multi-dimensional associative array that can have functions (although I rarely create these objects with functions).

To create a basic object, you can use the built-in Object data type.

song = new Object;
//add properties
song.title = "Misty Morning";
song.artist = "Bob Marley";
song.album = "Kaya";

To retrieve the properties from a Javascript Object, I simply:

alert(song.title);
//will display 'Misty Morning' in the alert box

Adding Multiple Values

Now let’s create a more complex example – one that I use quite often in my web applications. I will store multiple values of a shopping cart order. First the object:

var myCart = new Array();
function imCart(id, title, artist, album, quantity, price) { 
        this.id = id;
        this.title = title;
        this.artist = artist;
        this.album = album;
        this.quantity = quantity;
        this.price = price;
}

I created an array ‘myCart’ and I’m storing the item id, title, artist, album, quantity and price in the Javascript Object ‘imCart’. To add items to the cart, I can simply:

myCart = new imCart(1, 'Misty Morning', 'Bob Marley', 'Kaya', '3.95');

I can then retrieve the imCart properties:

alert(myCart.title);
// will return 'Misty Morning'

To store multiple values from a json object:

var songs = [{id: '1', title: 'Misty Morning', artist: 'Bob Marley', album: 'Kaya', quantity: '1': price: '3.95'},
                    {id: '2', title: 'Sing For The Moment', artist: 'Eminem', album: 'The Eminem Show', quantity: '1': price: '3.25'},
                    {id: '3', title: 'Sweetest Goodbye', artist: 'Maroon 5', album: 'Songs About Jane', quantity: '1': price: '3.50'},
                    {id: '4', title: 'Give U My Heart', artist: 'Pieces Of A Dream', album: 'Soul Intent', quantity: '1': price: '3.45'},
                    {id: '5', title: 'Roller Skates', artist: Steel Pulse', album: 'Earth Crisis', quantity: '1': price: '3.95'}];
 
var ln = songs.length;
// loop through each json record
for (var i=0; i<ln; i++) {
      myCart[i] = new imCart(songs[i].id, songs[i].title, songs[i].artist, songs[i].album, songs[i].quantity, songs[i].price); 
}

Now if I wanted to retrieve the song title from the 3rd record in the myCart array:

alert(myCart[2].title);

The values in the Javascript Object will remain in memory for as long as the user remains on the page. These objects are very flexible, but overuse of them may cause your application to respond slowly – especially on computers with a limited amount of memory. Enjoy.