Question

I just stumbled over a small problem when extending javascript objects using jQuery. When executing

var item = $.extend(options.itemDefaults, item);

options.itemDefaults is extended with the properties that are already in item and the result is passed to item. So far, so good.

But the next time this line is executed, options.itemDefaults has all the property values that item had, instead of the original defaults. My defaults are lost!

I realize I could simply store the defaults object in a temporary variable, and extend the temporary variable instead, but it seems a bit lengthy. Is there a way to do what I’m after (overriding default values with supplied ones, taking defaults when no values are supplied, but not changing the default object) without that detour?

Update: It seems this wasn’t as easy to get around as I hoped. When I do

var defaults = options.itemDefaults;
var $item = $.extend(defaults, { attributeModel: options.attributeModel }, item);
defaults = undefined 

in each iteration, I still add properties from item on options.itemDefaults! How do I get around this?

Answer 1

Try,

var item = $.extend(true, {}, options.itemDefaults, item);

The true flag indicates that a deep copy must be made.

We use an empty object {} as the target so the defaults are not tampered with.

Properties of options.itemDefaults, and item will be copied into the empty object.