Javascript: Inherit+modify associative array?

Question

I'm looking for an elegant way to override values in an associative array.

For example, say I have my base options as:

var base_options = {
    hintText:"something",
    borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
    width: 200, height: LABEL_HEIGHT-4,
    font: {fontSize:16}, left: 95
}

I want to use this as the base, but be able to override a few items in this base on a case-by-case basis - for example, hintText would be different for each item. What's a clean and elegant way to get a copy of this array with a few parameters modified?

I realize I can change each individual item, as in:

options.hintText = "new thing";

but I suspect there's a more elegant way.

Answer 1

Something like this?

var changed_options = { 
   hintText: "somethingElse",
   font: {fontSize: 24} 
}

for(var prop in changed_options) 
    base_options[prop] = changed_options[prop];

Answer 2

function merge(base, options) { 
   var result = {};
   for (var k in base) if (base.hasOwnProperty(k)) {
      result[k] = options[k] || base[k];
   } // note, it will leave out properties that are in options, but not in base..
   return result;
}

If you happen to be using jQuery, it has a built in extend method on the jQuery object that does this.

Answer 3

var base_options = function() { 
    hintText:arguments[0], 
    borderStyle:arguments[1], 
    width:arguments[2],
    height:arguments[3], 
    font:arguments[4]
    left:arguments[5]
};

var thisObj = new base_option(blah, blah, blah, blah, blah);

That may seem like overkill but then you can add all of the new instances to an array and use a for loop for them when you want/need to change them.

Answer 4

I have implemented this function in a few of my projects:

if (typeof Object.merge !== 'function') {
    Object.merge = function (o1, o2) { // Function to merge all of the properties from one object into another
        for(var i in o2) { o1[i] = o2[i]; }
        return o1;
    };
} 

So, now I can use it like:

Object.merge(options, {hintText: "new thing", left: 55});

As far as copying objects, there is already a good StackOverflow discussion about that.

Answer 5

You could use a base class to encapsulate the behavior Weston propose.

function Options(changed_options) {
     this.hintText = "something";
     this.borderStyle =Titanium.UI.INPUT_BORDERSTYLE_ROUNDED;
     // ...

     if(changed_options)
         for(var prop in changed_options) 
             this[prop] = changed_options[prop];
}

var foo = new Options({ "hintText":"changed"});

Should work.