Merge two objects without override

Question

I have a defaultObject like that:

var default = {
    abc: "123",
    def: "456",
    ghi: {
       jkl: "789",
       mno: "012"
    }
};

And I have another like:

var values = {
    abc: "zzz",
    ghi: {
       jkl: "yyy",
    }
};

How can I merge those 2 objects with the following result (no override)?

var values = {
    abc: "zzz",
    def: "456",
    ghi: {
       jkl: "yyy",
       mno: "012"
    }
};

(I don't want to change the default object!)

Oriol · Answer 1 · 2013-12-15T18:18:49.523

For those who don't use jQuery, here comes a vanilla-js solution.

Solution:

function extend (target) {
    for(var i=1; i<arguments.length; ++i) {
        var from = arguments[i];
        if(typeof from !== 'object') continue;
        for(var j in from) {
            if(from.hasOwnProperty(j)) {
                target[j] = typeof from[j]==='object'
                ? extend({}, target[j], from[j])
                : from[j];
            }
        }
    }
    return target;
}

Compressed (with Closure Compiler):

Only 199 characters!

var extend=function e(c){for(var d=1;d<arguments.length;++d){var a=arguments[d];if("object"===typeof a)for(var b in a)a.hasOwnProperty(b)&&(c[b]="object"===typeof a[b]?e({},c[b],a[b]):a[b])}return c}

How to use:

extend(target, obj1, obj2); // returns target

If you only want to merge, use

var merged = extend({}, obj1, obj2);

Features:

It doesn't look at objects' prototype.
Ignores non-objects.
It is recursive in order to merge properties which are objects.
Objects referenced in target's properties, if extended, are replaced by new ones, and the original ones are not modified.
In case of same property names, the merged value will be the merging of the objects after the last (in the order of arguments) non-object value. Or, if the last isn't an object, itself.

Examples:

extend({}, {a:1}, {a:2});            // {a:2}
extend({}, {a:1}, {b:2});            // {a:1, b:2}
extend({}, {a: {b:1}}, {a: {b:2}});  // {a: {b:2}}
extend({}, {a: {b:1}}, {a: {c:2}});  // {a: {b:2, c:2}}
extend({}, {a: {a:1}}, {a: {b:2}}, {a: 'whatever non object'});
    // {a: "whatever non object"}
extend({}, {a: {a:1}}, {a: {b:2}}, {a: 'whatever non object'}, {a: {c:3}},{a: {d:4}});
    // {a: {c:3, d:4}}

Warning:

Be aware that if browser is not clever enough, it could be trapped in an infinite loop:

var obj1={},
    obj2={};
obj1.me=obj1;
obj2.me=obj2;
extend({},obj1,obj2);

If the browser is clever enough, it can throw an error, or return {me: undefined}, or whatever.

Note that this warning also applies if you use jQuery's $.extend.

One problem. It converts arrays to objects. – user3123032 Aug 30 '22 at 14:20 — user3123032, Aug 30 '22 at 14:20

adeneo · Accepted Answer · 2018-12-10T17:12:02.460

13

With ES2015 now being supported in all modern browsers, the native Object.assign can be used to extend objects

Object.assign({}, _default, values)

Object.assign

Note that default is a reserved keyword, and can't be used as a variable name

The original answer, written in 2013 :

Since this is tagged with jQuery, you could use $.extend for a simple cross-browser solution

var temp = {};
$.extend(true, temp, _default, values);
values = temp;

edited Dec 10 '18 at 17:12

answered Dec 15 '13 at 01:14

adeneo

312,895
29
395
388

But this will change my default 'default_array' and I don't want it, because it is a global variable... – amp Dec 15 '13 at 01:21
2

@amp - that's easily avoided by using a temporary object. – adeneo Dec 15 '13 at 01:29
8

This doesn't work, `ghi` will be overwritten, not merged together. – Nate Jun 12 '19 at 04:04
yes, existing objects are being removed inside nested json – Phaneendra Charyulu Kanduri Jun 02 '21 at 16:42

score 8 · Answer 3 · answered Feb 15 '18 at 21:59

8

Also if you are happy with ES6:

Object.assign({}, default, values)

answered Feb 15 '18 at 21:59

typingduck

825
10
15

4

Still overrides if value exist in default – Michael Heuberger May 27 '21 at 07:45

score 3 · Answer 4 · answered May 16 '17 at 21:14

Another way would be to simply extend value by default (instead of the other way around which would override default)

Object.assign(value, default) // values of default overrides value
default = value // reset default to value

The caveat here is that the content of value is changed as well. Upside is no library is required and easier than the plain vanilla solution above.

score 3 · Answer 5 · answered Oct 26 '18 at 16:13

My version based on Oriol's answer adds a check for arrays, so that arrays don't get transformed into funny {'0': ..., '1': ...} thingys

function extend (target) {
  for(var i=1; i<arguments.length; ++i) {
    var from = arguments[i];
    if(typeof from !== 'object') continue;
    for(var j in from) {
      if(from.hasOwnProperty(j)) {
        target[j] = typeof from[j]==='object' && !Array.isArray(from[j])
          ? extend({}, target[j], from[j])
          : from[j];
      }
    }
  }
  return target;
}

score 1 · Answer 6 · answered Aug 09 '19 at 12:30

I found that the easiest way to to this is to use mergeWith() from lodash ( https://lodash.com/docs/4.17.15#mergeWith ) which accepts a customizer function that decides what to do with every property merge. Here is one that is recursive :

const mergeFunction = (objValue, srcValue) => {
  if (typeof srcValue === 'object') {
    _.mergeWith(objValue, srcValue, mergeFunction)
  } else if (objValue) {
    return objValue
  } else {
    return srcValue
  }
}

Merge two objects without override

6 Answers6

Linked