Question

Seems $.extend uses only the keys of its input to determine what to overwrite. So when my config looks like this

var config = {
    "numeric" : false,
    "keycode_whitelist" : [
        37, 39, // Left, right
        9,      // Tab
        17,     // Ctrl
        116     // F5
    ]
};

and is extended with more keycodes to add to the whitelist, extend simply overwrites the defaults with the new keycodes one by one even though they are different values.

I’m thinking about solving this problem by typing the keys like this 37: 37, 39: 39 etc. I would love a solution that doesn’t force me to mess up the syntax of my configuration though.

Answer 1

You might want to use merge instead of extend:

var config = {
    "numeric": false,
    "keycode_whitelist": [
        37, 39, // Left, right
        9, // Tab
        17, // Ctrl
        116 // F5
    ]
};

var custom = {
    "somevalue": "some other things",
    "keycode_whitelist": [
        1, 2, 3
        ]
};
var newopts = $.extend({}, config, custom);
newopts.keycode_whitelist = $.merge(custom.keycode_whitelist, config.keycode_whitelist);

Demo: http://jsfiddle.net/3Q4cF/2/

Update:

To merge every single array:

$.each(config, function(key, obj){
    if($.isArray(obj)) {
        if(custom[key]) {
           newopts[key] = $.merge(config[key], custom[key]);
        }
    }
} );

http://jsfiddle.net/3Q4cF/5/