Javascript: Merge two objects with spread operator

Question

var a = {
  1: {
    687: {
      name:'test1'
    }
  }
}
var b = {
  1: {
    689: {
      name:'test2'
    }
  }
}
var c = {
  ...a,
  ...b
}
console.log(c)

I was expecting the result to be :

{
  1: {
    687: {
      name:'test1'
    },
    689: {
      name:'test2'
    }
  }
}

But, it is :

{
  1: {
    689: {
      name:'test2'
    }
  }
}

Am I using spread operator wrong? What is the most efficient way to merge two objects? I made a function which iterates through each key in the objects, it works but I think it's not the write way.

Object.assign({},a,b) also returns the same (first result, which I don't want).

I went through the question How can I merge properties of two JavaScript objects dynamically?

But It doesn't answer my question. this answer (https://stackoverflow.com/a/171256/1352853) is also not what I want.

Thanks in advance.

even if spread would work, it would overwriting the object with the last object. — Nina Scholz, Jun 23 '17 at 12:50
https://stackoverflow.com/a/383245/2008111 might not answer the question but solve the problem :) — caramba, Jun 23 '17 at 12:51
Nope, the spread operator applies a shallow merge. So it's merging two objects with a single field '1', yielding an object with just one field. — E_net4, Jun 23 '17 at 12:51
Possible duplicate of [How can I merge properties of two JavaScript objects dynamically?](https://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically) — caramba, Jun 23 '17 at 12:52
You need to merge the *sub* objects: `var c = { 1: { ...a.1, ...b.1 } };` — Jared Smith, Jun 23 '17 at 12:57
@JaredSmith upvoted though `a.1` is invalid, should be `a[1]` or in full `var c = { 1: { ...a[1], ...b[1] } }` (only chrome 60+ and FF55+ support too.) — Kaiido, Jun 23 '17 at 13:05
@Kaiido true, my error. I don't normally try to use non-strings as property keys :P. As for the browser coverage, OP used spread so I figured it was game. — Jared Smith, Jun 23 '17 at 13:31

score 6 · Accepted Answer · answered Jun 23 '17 at 12:59

lodash merge actually does what I exactly need.

https://blog.mariusschulz.com/2015/03/30/combining-settings-objects-with-lodash-assign-or-merge

// Defined within your component
var defaultSettings = {
    strictMode: true,
    formatting: {
        finalNewline: true,
        quotes: "double"
    }
};

// Provided by the developer using your component
var userSettings = {
    formatting: {
        quotes: "single"
    }
};

var assignedSettings = _.assign({}, defaultSettings, userSettings);

// {
//     strictMode: true,
//     formatting: {
//         quotes: "single"
//     }
// }

var mergedSettings = _.merge({}, defaultSettings, userSettings);

// {
//     strictMode: true,
//     formatting: {
//         finalNewline: true,
//         quotes: "single"
//     }
// }

While handy, this should not be the accepted solution. It asks for a javascript solution and not a lodash utility, so either go with Object.assign({}, obj1, obj2) or the object spread operator I'd say. — spoutnik, Jun 14 '19 at 14:55
it's cool to know about lodash merge method, nothing wrong about that. — Vasyl Gutnyk, May 08 '20 at 07:21

Kulvar · Answer 2 · 2017-06-23T13:30:31.850

1

The spread operator is for arrays and iterable objects. If x = ['A','B','C']; Then ...x is equals to writing x[0], x[1], x[2].

You want to merge the nested objects key by key from each object, not replace the previous values.

let key;
let c = {};
for (key in a) {
    c[key] = Object.assign({}, a[key]);
}
for (key in b) {
    c[key] = Object.assign(c[key] || {}, b[key]);
}

edited Jun 23 '17 at 13:30

answered Jun 23 '17 at 13:00

Kulvar

1,139
9
22

How deep would it go? – Ata Mohammadi Jun 23 '17 at 13:01
This one will go only 1 level deep. For deeper levels, a recursive function is needed – Kulvar Jun 23 '17 at 13:05
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Spread_operator#Spread_in_object_literals – Kaiido Jun 23 '17 at 13:07
@AtaMohammadi Pretty deep! xd – TDiblik Mar 20 '22 at 22:06

Javascript: Merge two objects with spread operator

2 Answers2