es6 spread operator not combining keyed objects

Question

I want to build an object of keyed objects.

Why is the spread operator not combining as used below? Instead it only keeps the second object.

let a = {
  key1: {
    floo: 'blar'
  }
}

let b = {
  key2: {
    floo: 'blar'
  }
}
console.log(...a, b);

And most importantly please show me the correct way to do this!

Thanks

[`...` is not an operator!](https://stackoverflow.com/questions/37151966/what-is-spreadelement-in-ecmascript-documentation-is-it-the-same-as-spread-oper/37152508#37152508) — Felix Kling, May 28 '18 at 15:32

Mr. Alien · Accepted Answer · 2018-05-28T06:44:55.083

It should be

console.log({...a, ...b});

The above will merge the two objects and will create a new object with key1 an key2 respectively. Also, note that spread operator for objects doesn't work the same way as Object.assign() does.

Note that the merged object is just a reference. For example, modifying the value of the object like

a.key1.floo = 'someotherval';

will alter the a object and also reflect in the merged object.

For more information, refer to Spread in Object Literals section.

es6 spread operator not combining keyed objects

1 Answers1