Skip to content
Create a gist now

Instantly share code, notes, and snippets.

Deep Extend / Merge Javascript Objects - underscore.js Mixin
/* Copyright (C) 2012-2014 Kurt Milam - http://xioup.com | Source: https://gist.github.com/1868955
*
* This mixin now has its own github repository: https://github.com/kurtmilam/underscoreDeepExtend
* It's also available through npm and bower
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
**/
// Based conceptually on the _.extend() function in underscore.js ( see http://documentcloud.github.com/underscore/#extend for more details )
function deepExtend(obj) {
var parentRE = /#{\s*?_\s*?}/,
source,
isAssign = function (oProp, sProp) {
return (_.isUndefined(oProp) || _.isNull(oProp) || _.isFunction(oProp) || _.isNull(sProp) || _.isDate(sProp));
},
procAssign = function (oProp, sProp, propName) {
// Perform a straight assignment
// Assign for object properties & return for array members
return obj[propName] = _.clone(sProp);
},
hasRegex = function (oProp, sProp) {
return ( _.isString(sProp) && parentRE.test(sProp) );
},
procRegex = function (oProp, sProp, propName) {
// Perform a string.replace using parentRE if oProp is a string
if (!_.isString(oProp)) {
// We're being optimistic at the moment
// throw new Error('Trying to combine a string with a non-string (' + propName + ')');
}
// Assign for object properties & return for array members
return obj[propName] = sProp.replace(parentRE, oProp);
},
hasArray = function (oProp, sProp) {
return (_.isArray(oProp) || _.isArray(sProp));
},
procArray = function (oProp, sProp, propName) {
// extend oProp if both properties are arrays
if (!_.isArray(oProp) || !_.isArray(sProp)){
throw new Error('Trying to combine an array with a non-array (' + propName + ')');
}
var tmp = _.deepExtend(obj[propName], sProp);
// Assign for object properties & return for array members
return obj[propName] = _.reject(tmp, _.isNull);
},
hasObject = function (oProp, sProp) {
return (_.isObject(oProp) || _.isObject(sProp));
},
procObject = function (oProp, sProp, propName) {
// extend oProp if both properties are objects
if (!_.isObject(oProp) || !_.isObject(sProp)){
throw new Error('Trying to combine an object with a non-object (' + propName + ')');
}
// Assign for object properties & return for array members
return obj[propName] = _.deepExtend(oProp, sProp);
},
procMain = function(propName) {
var oProp = obj[propName],
sProp = source[propName];
// The order of the 'if' statements is critical
// Cases in which we want to perform a straight assignment
if ( isAssign(oProp, sProp) ) {
procAssign(oProp, sProp, propName);
}
// sProp is a string that contains parentRE
else if ( hasRegex(oProp, sProp) ) {
procRegex(oProp, sProp, propName);
}
// At least one property is an array
else if ( hasArray(oProp, sProp) ){
procArray(oProp, sProp, propName);
}
// At least one property is an object
else if ( hasObject(oProp, sProp) ){
procObject(oProp, sProp, propName);
}
// Everything else
else {
// Let's be optimistic and perform a straight assignment
procAssign(oProp, sProp, propName);
}
},
procAll = function(src) {
source = src;
Object.keys(source).forEach(procMain);
};
_.each(Array.prototype.slice.call(arguments, 1), procAll);
return obj;
};
_.mixin({ 'deepExtend': deepExtend });
/**
* Dependency: underscore.js ( http://documentcloud.github.com/underscore/ )
*
* Mix it in with underscore.js:
* _.mixin({deepExtend: deepExtend});
*
* Call it like this:
* var myObj = _.deepExtend(grandparent, child, grandchild, greatgrandchild)
*
* Notes:
* Keep it DRY.
* This function is especially useful if you're working with JSON config documents. It allows you to create a default
* config document with the most common settings, then override those settings for specific cases. It accepts any
* number of objects as arguments, giving you fine-grained control over your config document hierarchy.
*
* Special Features and Considerations:
* - parentRE allows you to concatenate strings. example:
* var obj = _.deepExtend({url: "www.example.com"}, {url: "http://#{_}/path/to/file.html"});
* console.log(obj.url);
* output: "http://www.example.com/path/to/file.html"
*
* - parentRE also acts as a placeholder, which can be useful when you need to change one value in an array, while
* leaving the others untouched. example:
* var arr = _.deepExtend([100, {id: 1234}, true, "foo", [250, 500]],
* ["#{_}", "#{_}", false, "#{_}", "#{_}"]);
* console.log(arr);
* output: [100, {id: 1234}, false, "foo", [250, 500]]
*
* - The previous example can also be written like this:
* var arr = _.deepExtend([100, {id:1234}, true, "foo", [250, 500]],
* ["#{_}", {}, false, "#{_}", []]);
* console.log(arr);
* output: [100, {id: 1234}, false, "foo", [250, 500]]
*
* - And also like this:
* var arr = _.deepExtend([100, {id:1234}, true, "foo", [250, 500]],
* ["#{_}", {}, false]);
* console.log(arr);
* output: [100, {id: 1234}, false, "foo", [250, 500]]
*
* - Array order is important. example:
* var arr = _.deepExtend([1, 2, 3, 4], [1, 4, 3, 2]);
* console.log(arr);
* output: [1, 4, 3, 2]
*
* - You can remove an array element set in a parent object by setting the same index value to null in a child object.
* example:
* var obj = _.deepExtend({arr: [1, 2, 3, 4]}, {arr: ["#{_}", null]});
* console.log(obj.arr);
* output: [1, 3, 4]
*
**/
@balupton

License?

@kurtmilam
Owner

How about GPL?

@diversario

MIT?..

@wulftone
wulftone commented Nov 2, 2012

MIT

@pygy
pygy commented Dec 7, 2012

Now available as a node/AMD package:

https://github.com/pygy/underscoreDeepExtend

Edit: corrected the URL

@pygy
pygy commented Dec 7, 2012

It also works as-is in the browser.

@wulftone
wulftone commented Feb 5, 2013

I forked it and added support for copying properties that are functions to line 20.

{
  foo: function(){}
}

will now get copied instead of attempting to deepExtend it (functions are "objects" in javascript, so the branching sent it to deepExtend again, on line 39).

@kapooostin

It fails to delete an element in a parent by setting it to null in a child, if the type of this element is either Object or Array.

I fixed it with this (I used fork by @wulftone):

if (_.isUndefined(obj[prop]) || _.isFunction(obj[prop]) || _.isNull(source[prop])) {
@kurtmilam
Owner

@wulftone & @kapooostin : Thanks for the updates! I went ahead and incorporated both into this gist.

@mattvagni

This is awesome - thank you.

@kurtmilam
Owner

I've change the license from GPL to expat (MIT) due to popular demand.

@tkalfigo
tkalfigo commented Jun 5, 2014

Not getting expected result with Dates.

var a={a: new Date()}
> Object {a: Thu Jun 05 2014 15:29:32 GMT+0200 (CEST)}
var b={a: new Date()}
> Object {a: Thu Jun 05 2014 15:29:38 GMT+0200 (CEST)}
_.deepExtend(a, b)
> Object {a: Thu Jun 05 2014 15:29:32 GMT+0200 (CEST)}

Should be getting 15:29:38 instead of 15:29:32. Missing something?

@darkwebdev

jsHint says that cyclic complexity is 15, not so good, but thanks anyway=)

@kurtmilam
Owner

@tkalfigo: Thanks for the heads-up. I've updated the function to make it handle date types correctly. Here's a working Fiddle (all action takes place in the console).

@darkwebdev: I guess you meant 'cyclomatic complexity', since 'cyclic complexity' isn't a thing. See also here and here. Thanks for offering your opinion, though. Feel free to drop back by and leave a note when you've managed to write a significantly less cyclomatically complex version.

@vbarbarosh

Is is buggy:

var a = {name: 'a', items:[]};
_.deepExtend({}, a, {items: [1,2,3]});
// a --- Object {name: "a", items: Array[3]}

Why does it alters a variable?

@kurtmilam
Owner

@vbarbosh: I'm not able to reproduce that behavior (tested on Chrome '40.0.2214.93 m' and Firefox 35.0.1 running on Windows 8.1 Pro 64bit).

Working Example: http://jsfiddle.net/texinwien/rkkfsqce/2/

Please prepare a working fiddle and let me know what browser you're seeing this behavior on, and I'll try to figure it out.

@kurtmilam
Owner

@vbarbosh: With a little more playing and testing, I was able to reproduce the behavior you reported. I've worked up a fix that I'm testing right now. I've made a pull request with tested corrections at the github repo, and have also updated the Gist to bring it up to the state of the code at the repo once the pull request is merged (takes care of some other issues reported at the repo, as well).

Thanks for the heads up!

@Xflofoxx
Xflofoxx commented Mar 5, 2015

At line 17:

 if (_.isUndefined(obj[prop]) || _.isFunction(obj[prop]) || _.isNull(source[prop]) || _.isDate(source[prop]))

will break if have obj[prop] = null and source[prop] = "[Object]"
Is this the correct behaviour?

//For example:
var o = {
     title: null
}
var newO = {
     title: {
       "en-GB" : "My Title"
      }
}
_.deepExtend(o, newO);
> 'Error: Trying to combine an object with a non-object (title)';

I think that o.title should became { "en-GB" : "My Title" }.

If you like, I suggest to change the line in this way:

if (_.isNull(obj[prop]) || _.isUndefined(obj[prop]) || _.isFunction(obj[prop]) || _.isNull(source[prop]) || _.isDate(source[prop])) {
@hyyan
hyyan commented Apr 30, 2015

awesome - thank you.

@AngeIII
AngeIII commented May 22, 2015

Not work as expected:

var x = {
    "defaults": {
        "color": "red",
    },
};

var y = _.deepExtend({},x);

y.defaults.color = "blue";
console.log(x.defaults.color); // "blue"

chrome: 42.0.2311.152 m

@cancerberoSgx

Nice! thank you!. just a detail, jshint is complaining of "Don't make functions within a loop". Easy to fix, just put the function in a variable: function (item) { return _.isNull(item);};

@cunneen
cunneen commented Mar 24, 2016

@Angelll, I worked around your issue by cloning the object (may not be possible in your case):

var x = {
    "defaults": {
        "color": "red",
    },
};

var y = {};
deepExtend(y,JSON.parse(JSON.stringify(x)))

y.defaults.color = "blue";
console.log(x.defaults.color); // "red"
@kurtmilam
Owner
kurtmilam commented May 11, 2016 edited

@Xflofoxx : Agreed. I'll add your suggested code to the gist and the github repository.
@AngeIII: My initial answer to you was incorrect and/or irrelevant. I agree with your assessment and am working on a fix.
@cancerberoSgx: Agreed! I will fix this, as well.

Thanks, all! Don't forget that this has been moved to its own github repository and is now also available in bower and npm.

@kurtmilam
Owner

I made several improvements and reduced the function's cyclomatic complexity to 5 for those who were concerned about it being overly complex.

github repository

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.