Getting intimate with Javascript objects part #1

Gentle reader,
This evening I am going to start a series of posts where I will have a little poke around JavaScript objects and Object-Oritented JS in my own weird manner. So for my non-geek readers it is probably best that you leave now - no one will think the worse of you if you do:-)

OK let the geeky fiddling and poking begin!

Objects are composite data types. There we go, RGQ (Required Geekiness Quotient) achieved, I managed to get the word "composite" shoe-horned into the first sentence! Mind you in the context of JS objects it is also very apt because a JS object is a composite object that clumps together lots of related values and functions into one unordered, named collection.

A. Creating Objects

Objects can be created with the new operator followed by the constructor function for the object

The most basic of these would be

var MyThing = new Object();

This object exists at the same usefulness quantum level as a "glass hammer" or a "chocolate BBQ" as it contains no properties and has no methods. Think of MyThing as the Paris Hilton of JS variables. Rather than an "it-girl" it is a "it-var", superficially interesting enough to take on one date, but the resulting sex tape would be crap.

Ohh slipped in some more Object Jargon there ... just so you know

The Values stored in an Object are called Properties
The Functions stored in an Object are called Methods

Moving quickly on, you are bound to have used constructor functions before, like these

var MyDate = new Date();
or
var MyNextHangover = new Date(2009,01,01)

are examples of creating an object that represents a date and time. You can do lots of interesting things with the JS date object which you can explore here.

BUT!!!!! just to make JS interesting ... you don't have to create an object using a constructor you can use the Object Literal method to create and initialize new objects. An Object literal is a comma-separated list of property-name: value pairs enclosed in curly brackets (or braces if you have to call them that) for example

var MyCockTail = {
name: "Sex on the beach",
price: 3.50,
type: "Fruity",
glass: "Highball",
garnish: "Lime Wedge"
}

Would create a JS object that holds the details of a particularly tasty if oddly named cocktail.

You are not constrained when it comes to the type of Properties you can store in an object, any of the JS data types can be stored as a property in an object. I emboldened that because it is important and I WILL be mentioning it again so it is best that you make a "note to self" now .. s'ok I will wait here while you do it

[..waits...]

For example

var MyCockTail = {
name: "Sex on the beach",
price: 3.50,
type: "Fruity",
glass: "Highball",
garnish: "Lime Wedge",
mix: {
shotA: "2 x Vodka",
shotB: "1 x Peach schnapps",
shotC: "3 x Orange Juice",
shotD: "3 x Cranberry Juice"
}
}

This is the same as the previous example except I have added a new property to the object named mix which is an object itself containing the properties shotA,shotB,shotC and shotD.

B. Accessing ,Setting Object Properties and deleting a Property when you are done

OK got that now how do I access these things in my code. well that is dead easy use the period operator, period. .o0(oh the savage wit!) Seriously you use the . character to access the value of an objects property. For example using the MyCockTail object we created above we can pull out the name thusly :

MyCockTail.name
or
MyCockTail.price
or
MyCockTail.mix.shotA

So we could have a piece of JS that goes like this

alert("You have selected "+MyCockTail.name+" which is a "+MyCockTail.type+" drink")

Easy init? :-)

But what happens if if want to change the value of a property in code? That is easy, just set it the same way you would if it was an ordinary variable. like this

MyCockTail.name = "Entirely innocent frolic on the beach";

Would make the name of the cocktail in the example above acceptable at a church social.

"But...", I hear the brighter of you ask "..what happens if i try to access a property that either doesn't exist or has yet to be set?" Well if you do this, a large boxing glove will materialize from the screen and get all Evander Holyfield with your nose ... I jest but dont' you wish you could do that? ... anyway all that happens is that the you end up retrieving the undefined value. For example

alert(MyCockTail.hasUmbrella)

would result in the alert dialog appearing with undefined in it like this


"OK", the smart arse in the audience says "How do I delete a property?"

I look smug and reply "like this...."

delete MyCockTail.name

but be careful this does not just set the value of MyCockTail.name to undefined. It deletes the entire property from the object. It is gone completely!

Ok that is enough for today ... in the next posts in this series I will look in more detail at rolling your own constructor method ,prototypes and inheritance, and how to fool JS into the notion that it has formal classes.