Object Programming Examples

© 18 February, 2013, Martin Rinehart

Let's look at examples from the interface of JavaScript to the browsers' DOM, Document Object Model. In the DOM, one object is the root (sort of) and the rest of what you see in your browser's client area are objects, nodes of a tree branching from the root. These objects have many properties, including a style property. That property itself is an object with its own properties.

Programming the Style Object

You could have a border color style. (And a width, and a style.borderStyle, such as 'solid', 'dashed' and so on). You could have separate styles for borderLeft, borderTop and so on. You could have a background style, possibly a color or an image. If you have an image you could have it repeat vertically, horizontally, both or neither. The possibilities go on. Altogether than are hundreds of styles possible for each object in the DOM, and hundreds of DOM elements can make up a single page. What to do?

In a class-based language you could start with a basic set of styles and then extend the basic set to incorporate clusters of styles commonly used together. As an alternative, you could have a single style class that had a property for every one of the hundreds of possibilities.

But if you had an object programming capability you could just add styles to a DOM object as you needed them. Need a separate color for the top border? obj.style.borderTopColor = .... (Python programmers know and use this sort of dynamic object.)

A Program to Add Properties

This is a general-purpose, illustrative program to add properties to objects as needed:

function add_property( object, prop_name, prop_value ) {
    object[ prop_name ] = prop_value;
}

Of course, since it is a one-liner it is really easier to just use the language:

object[ prop_name ] = prop_value;

    // just as simple as

add_property( object, prop_name, prop_value );

A Program to Add Objects

Assume that you have two objects. The first has the default styles for links, for example. The second has non-default styles that you would like to apply to a particular subset of the links on a page. Wouldn't it be nice if we could just add the properties from one object to the properties of another? This will do the trick:

function add_props( default, special ) {
    for ( var prop_name in special ) { default[ prop_name ] = special[ prop_name ]; }
}

A Safer Program to Add Objects

I do hope the above example scares you, at least a little. It modifies the default object directly, a side-effect. (In Ruby you would add "!" as a suffix to the name: add_props!().) Side effects are not considered a best practice in many circles. Let's create a new object and leave the originals untouched.

function add_objects ( base, addendum ) {
	var ret = {}; // create a new object
	for ( var prop_name in base ) { ret[ prop_name ] = base[ prop_name ]; }
	for ( prop_name in addendum ) { ret[ prop_name ] = addendum[ prop_name ]; }
	return ret;
}

That function creates the union of base and addendum. In the intersection of the two, the property values from addendum overwrite the values from base. It is similarly easy to create other utilities that preserve base or return only the intersection, the union minus the intersection or whatever. In fact, there is no general library of such functions as they are easier to type into your source than to look up in a library reference.

Reversing the Dictionary

In JavaScript, an object is a dictionary. (Just as Perl proved with regex, once you bring a structure to the front of the class in a language, it becomes much more heavily used.) The value of foo.bar is the value found by looking up 'bar' in the foo dictionary. The JavaScript dictionary is coded for fast lookups (probably a hash table). Assume that we have an object where we want to look up the property name based on its value. Reversing the values and keys would be helpful. Try this:

function reverse( object ) {
    ret = {}; // new, empty object
    for ( var prop_name in object ) } ret[ object[prop_name] ] = prop_name; }
    return ret;
}

Let's try this out, and, while we do so, illustrate the value of the JavaScript object literal for those who have not used it.

var pets = { dog:'Fido', cat:'Tiger', python:'Monty' };
// pets.dog == pets[ 'dog' ] == 'Fido'

var by_name = reverse( pets );

/* by_name is:
    { Fido:'dog', Tiger:'cat', Monty:'python' }

 by_name.Fido == 'dog'
 by_name[ 'Tiger' ] == 'cat' */

Feedback: MartinRinehart at gmail dot com

# # #