Creating a config for a function in JavaScript

Question

I want my JavaScript class to be configurable from the outside. So, I created a private config-property and a loadConfig-method. My problem is, that when I load a config, it overwrites the config-property completely and not just the properties I defined.

(function() {
var config = {
    param: value,
    group: {
        groupParam: value
    }
};
function MyClass() {
    this.loadConfig = function(loadConfig) {
        if (typepof loadConfig == "undefined" || typeof loadConfig == "null")
            return;
        else
            config = loadConfig;
    };  
}
window.MyClass = new MyClass();
})();

When I load a custom config

<script type="text/javascript">
    var config = {
        group: {
            groupParam: "newValue"
        }
    };

    MyClass.loadConfig(config);
</script>

I want config.param to still be "value", while config.group.groupParam is "newValue".

Currently, the object is overwritten and after loadConfig(), config.param doesn't exist anymore.

Answer 1

If you don't want to reinvent the wheel, jQuery has a great function called $.extend() which seems to be what you need.

You can check it out in the jQuery 1.6.1 source for example ( Ctrl + F and "extend" => been a long time since I've been waiting to use these keyboard things once :) ).

Answer 2

It's overwritten because you're telling it to overwrite with this line in your loadConfig method:

config = loadConfig;

In order to preserve any values that loadConfig does not explicitly change, you'll have to loop through all of the properties in loadConfig and assign them individually:

this.loadConfig = function (loadConfig) {
    if (typeof loadConfig == "undefined" || typeof loadConfig == "null") {
        return;
    } else {
        var x;
        for (x in loadConfig) {
            if (Object.prototype.hasOwnProperty.call(loadConfig, x)) {
                config[x] = loadConfig[x];
            }
        }
    }
};