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?

Answer 1

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

Answer 2

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.

Answer 3

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] } } }

Answer 4

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};

Answer 5

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.

Answer 6

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