Today I’m about to tell you something about Javascript objects and how to use them properly.

You can use rhino (javascript interpreter and shell) to test your scripts or you can throw it into your webbrowser. I prefer rhino over the webbrowser as I can test my code without firing up the webbrowser.

Let’s start simple:

Create an object with properties and print and access them:

var car = {
  "make": "Audi",
  "engine": "V8",
  "mileage": "123.000"
};

// both is possible
print(car.make)
print(car["make"])

Here we have a simple object with some properties. Nothing special about it. The expected result is “Audi”.

Sometimes if you don’t know the properties by heart, you may print the wrong propertie, e.g.

var car = {
  "make": "Audi",
  "engine": "V8",
  "mileage": "123.000"
};

print(car.brand)

Rhino will simply print out “undefined”. To workaround this issue you can put default values to it:

var car = {
  "make": "Audi",
  "engine": "V8",
  "mileage": "123.000"
};

print(car.brand || "the unknown brand")

And it will print out “the unknown brand” which is something you can expect and it’s always better to work with values you expect than with “undefined” ones.

However, here is a more detailed example of our car represented as an object:

var car = {
  "make": "Audi",
  "engine": {
    "type":"V",
    "cylinders":"8",
    "capacity":"4.2"
  },
  "mileage": "123.000"
};

print(car.engine.type)

There we print out the engine type which is “V” but what happens if we mistype “engine” e.g.:

var car = {
  "make": "Audi",
  "engine": {
    "type":"V",
    "cylinders":"8",
    "capacity":"4.2"
  },
  "mileage": "123.000"
};

print(car.engne.type)

We even get an exception using this so in fact the script “died”. We could use || like before, right?

var car = {
  "make": "Audi",
  "engine": {
    "type":"V",
    "cylinders":"8",
    "capacity":"4.2"
  },
  "mileage": "123.000"
};

print(car.engne.type || "unknown engine type")

No, we can’t! We still get an exception.

So I discovered the following construct:

var car = {
  "make": "Audi",
  "engine": {
    "type":"V",
    "cylinders":"8",
    "capacity":"4.2"
  },
  "mileage": "123.000"
};

print(car.engne && car.engne.type || "unknown engine type")

We don’t get an exception anymore but the result “unknown engine type”.

Sometimes you really want to make sure that your object has your desired property, so if you want you can check for the existense of a property, it’s simple:

if (car.hasOwnProperty("engine")) {
  print("car has an engine")
}

To add new properties, simply write it like this:

car.engine.mileage = "12.145"

And to update values, simply put:

car.engine.capacity = "3.7"

Sometimes you want to have a prototype you can base your objects on and it’s not too difficult:

if (typeof Object.fromPrototype !== 'function') {
  Object.fromPrototype = function(thePrototype) {
    var the_new_function = function() {};
    the_new_function.prototype = thePrototype;
    return new the_new_function;
  };
}

var car = {
  "make": "Audi",
  "engine": {
    "type":"V",
    "cylinders":"8",
    "capacity":"4.2"
  },
  "mileage": "123.000"
};

var security_car = Object.fromPrototype(car)
security_car.make = "Mercedes"
security_car.platinggrade = "10"

print(security_car.make || "na")

It will print “Mercedes” and it’s easy to understand. Whenever you want to retrieve a value, it goes down the hirarchy and tries to find it. In this case you told javascript that “security_car” has an additional property “platinggrade” which the prototype “car” doesn’t have. But you could try to print out the mileage and you’d get “123.000”.

And to get rid of your newly created property, you can simply delete it:

var security_car = Object.fromPrototype(car)
security_car.make = "Mercedes"
security_car.platinggrade = "10"

print(security_car.make || "na") // Mercedes

delete security_car.make

print(security_car.make || "na") // Audi (from the prototype)

So it will print “Mercedes” and “Audi”.

Finally try to namespace your whole objects so that no other code can interfere:

var SCHIPPLOCK = {};

if (typeof Object.fromPrototype !== 'function') {
  Object.fromPrototype = function(thePrototype) {
    var the_new_function = function() {};
    the_new_function.prototype = thePrototype;
    return new the_new_function;
  };
}

SCHIPPLOCK.car = {
  "make": "Audi",
  "engine": {
    "type":"V",
    "cylinders":"8",
    "capacity":"4.2"
  },
  "mileage": "123.000"
};

var security_car = Object.fromPrototype(SCHIPPLOCK.car)

security_car.make = "Mercedes"
security_car.platinggrade = "10"

print(security_car.make || "na")

delete security_car.make

print(security_car.make || "na")

Where “SCHIPPLOCK” is an empty object which reflects my namespace.


For now that’s enough I think. Play around with your code and don’t make javascript too ugly :). It’s not that bad imho :).

Andreas Schipplock.