How do I merge two javascript objects together in ES6+?

Question

I'm sick & tired of always having to write code like this:

function shallowExtend(obj1,obj2){
  var key;
  for ( key in obj2 ) {
    if ( obj2.hasOwnProperty(key) === false )  continue;
    obj1[key] = obj2[key]
  }
}

Or if I don't want to write the code myself, implement a library that does it already. Surely ES6+ is coming to the rescue on this will provide us with something like a Object.prototype.extend(obj2...) or Object.extend(obj1,obj2...)

So does ES6+ provide such functionality? If not already there, then is such functionality planned? If not planned, then why not?

@RobG this question is about the hope that ES6 will remove us from having to need such boilerplate crap in the first place.For what it's worth: github.com/balupton/bal-util/blob/… — balupton
– balupton, Commented Dec 13, 2012 at 19:59
I don't think there is a general way to copy the name/value pairs from one object to another. Do you only deal with own properties or those on the [[Prototype]] chain? Do you do "deep" or "shallow" copies? What about non–enumerable and non–writable properties? I think I'd rather have a small library function that does what I need, and mostly it's avoidable anyway. — RobG
– RobG, Commented Dec 13, 2012 at 23:23
See also How can I merge properties of two JavaScript objects dynamically? for non-ES6 solutions — Bergi
– Bergi, Commented Nov 28, 2021 at 1:17

mikemaccana · Accepted Answer · 2019-06-07 10:43:05Z

221

You will be able to do a shallow merge/extend/assign in ES6 by using Object.assign:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Syntax:

Object.assign(target, sources);

where ...sources represents the source object(s).

Example:

var obj1 = {name: 'Daisy', age: 30};
var obj2 = {name: 'Casey'};

Object.assign(obj1, obj2);

console.log(obj1.name === 'Casey' && obj1.age === 30);
// true

edited Jun 7, 2019 at 10:43

mikemaccana

126k113 gold badges441 silver badges544 bronze badges

answered Sep 16, 2014 at 20:25

Jack

9,5783 gold badges31 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

david Over a year ago

A small note: Object.assign mutates the target. If that's not what you want you can call it with an empty object: let merged = Object.assign({}, source1, source2);

monzonj Over a year ago

Please notice this is a shallow extend... nested objects are NOT merged

Joao Falcao Over a year ago

@monzonj, isn't there any option to extend nested objects, without using lodash or mout?

Ruslan Over a year ago

There is the good way to merge deeply nested objects without a library using just Object.assign: see my answer here

Andre Figueiredo Over a year ago

An old way to extend nested objects is using JSON.parse(JSON.stringify(src))

Thijs Koerselman · Accepted Answer · 2019-07-23 05:57:26Z

186

You can use the object spread syntax for this:

const merged = {...obj1, ...obj2}

For arrays the spread operator was already part of ES6 (ES2015), but for objects it was added to the language spec at ES9 (ES2018). Its proposal as been enabled by default in tools like Babel long before that.

edited Jul 23, 2019 at 5:57

answered Sep 3, 2015 at 9:54

Thijs Koerselman

23.4k25 gold badges85 silver badges122 bronze badges

7 Comments

Thijs Koerselman Over a year ago

No officially it is called ES2015 now :P Since when is destructuring not part of ES6? developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Running babel-node: const ob1 = {foo: 123}; const ob2 = {bar: 234}; const merged = {...ob1, ...ob2}; console.log(merged) Output: { foo: 123, bar: 234 }

Bergi Over a year ago

That's not destructuring, it's spreading - and no, for objects it's not part of ES6. You should disable experimental ES7 drafts in your babel.

Thijs Koerselman Over a year ago

Ah forgive me. You are right. It is a babel stage 2 feature at the moment. github.com/sebmarkbage/ecmascript-rest-spread I never realized that because I've been using it from the start with babel and it's enabled by default. But since you need to transpile anyway, and the object spread is a pretty straightforward thing I would recommend it anyway. I love it.

Thijs Koerselman Over a year ago

"Proposals that are stage 2 or above are enabled by default". babeljs.io/docs/usage/experimental

rinogo Over a year ago

NOTE: When the same property exists in both obj1 and obj2, the value from the right-most (latter) object takes precedence (obj2)

|

Salakar · Accepted Answer · 2016-07-19 11:46:21Z

I know this is a bit of an old issue but the easiest solution in ES2015/ES6 is actually quite simple, using Object.assign(),

Hopefully this helps, this does DEEP merging as well:

/**
 * Simple is object check.
 * @param item
 * @returns {boolean}
 */
export function isObject(item) {
  return (item && typeof item === 'object' && !Array.isArray(item) && item !== null);
}

/**
 * Deep merge two objects.
 * @param target
 * @param source
 */
export function mergeDeep(target, source) {
  if (isObject(target) && isObject(source)) {
    for (const key in source) {
      if (isObject(source[key])) {
        if (!target[key]) Object.assign(target, { [key]: {} });
        mergeDeep(target[key], source[key]);
      } else {
        Object.assign(target, { [key]: source[key] });
      }
    }
  }
  return target;
}

Example usage:

mergeDeep(this, { a: { b: { c: 123 } } });
// or
const merged = mergeDeep({a: 1}, { b : { c: { d: { e: 12345}}}});  
console.dir(merged); // { a: 1, b: { c: { d: [Object] } } }

Abdennour TOUMI · Accepted Answer · 2016-08-16 22:34:54Z

9

ES6

Object.assign(o1,o2) ; 
Object.assign({},o1,o2) ; //safe inheritance
var copy=Object.assign({},o1); // clone o1
//------Transform array of objects to one object---
var subjects_assess=[{maths:92},{phy:75},{sport:99}];
Object.assign(...subjects_assess); // {maths:92,phy:75,sport:99}

ES7 or Babel

{...o1,...o2} // inheritance
 var copy= {...o1};

answered Aug 16, 2016 at 22:34

Abdennour TOUMI

94.6k42 gold badges271 silver badges274 bronze badges

1 Comment

Nostalg.io Over a year ago

@FilipBartuzi that's not ES6 that you linked to. But it is basically doing the equivalent to _.extend() in lodash/underscore.

Nathan Wall · Accepted Answer · 2012-12-14 16:50:04Z

7

The addition of Object.mixin is currently being discussed to take care of the behavior you are asking for. https://mail.mozilla.org/pipermail/es-discuss/2012-December/027037.html

Although it is not in the ES6 draft yet, it seems like there is a lot of support for it, so I think it will show up in the drafts soon.

answered Dec 14, 2012 at 16:50

Nathan Wall

10.8k4 gold badges29 silver badges48 bronze badges

3 Comments

Knu Over a year ago

.mixin has been dropped by TC39.

Benjamin Gruenbaum Over a year ago

Warning - this answer is no longer correct, see the answer by Jack for a correct and working approach.

gotofritz Over a year ago

Object.mixin has been replaced by Object.assign

RobG · Accepted Answer · 2012-12-13 05:27:16Z

5

Perhaps the ES5 Object.defineProperties method will do the job?

e.g.

var a = {name:'fred'};
var b = {age: {value: 37, writeable: true}};

Object.defineProperties(a, b);

alert(a.age); // 37

MDN documentation: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperties

edited Dec 13, 2012 at 5:27

answered Dec 13, 2012 at 5:15

RobG

148k32 gold badges180 silver badges216 bronze badges

4 Comments

Reuben Morais Over a year ago

Be careful, though. On at least one browser this has performance implications.

RobG Over a year ago

I think the most interesting part is that defineProperties defines own properties. It doesn't overwrite properties on the [[prototype]] chain, it shadows them.

balupton Over a year ago

Good suggestion, though not really an extend as it is more for defining how properties should behave... Doing a straightforward Object.defineProperties(obj1,obj2) would cause unexpected results.

danp Over a year ago

would have to use Object.getOwnPropertyDescriptor also to set the property when it is a complex value, or you will copy by reference.

Collectives™ on Stack Overflow

How do I merge two javascript objects together in ES6+?

6 Answers 6

5 Comments

7 Comments

Comments

ES6

ES7 or Babel

1 Comment

3 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

7 Comments

Comments

ES6

ES7 or Babel

1 Comment

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related