Question

I’m having trouble with the $.extend function, see the code below…

//Function to merge the opts with the defaultOpts

var foo = function(opts){
    var opts = opts ? opts : {};

    console.log('BEFORE: ');
    console.log(JSON.stringify(opts));

    var defaultOpts = {
        className  : 'defaultClass',
        selectable : false,
        ID         : null,
        buttons    : []
    }   

    $.extend(true, opts, defaultOpts);

    console.log('AFTER: ');
    console.log(JSON.stringify(opts));
}

//Run the function and pass in a few options

foo({
    className : 'realClassName',
    buttons   : [
        {
            something : 'nothing'
        },
        {
            something : 'nothing'
        }
    ]
});

The problem with the output is that the “className” property is being replaced by the default value, but for some reason the “buttons” property works as expected.

Answer 1

try:

$.extend(true, opts, defaultOpts, opts);

or:

var nuOpts = {};
$.extend(true, nuOpts, defaultOpts, opts);
opts = nuOpts;