I need to be able to merge two (very simple) JavaScript objects at runtime. For example I'd like to:

var obj1 = { food: 'pizza', car: 'ford' }
var obj2 = { animal: 'dog' }

obj1.merge(obj2);

//obj1 now has three properties: food, car, and animal

Is there a built in way to do this? I do not need recursion, and I do not need to merge functions, just methods on flat objects.

javascript javascript-objects 
4 Answers

ECMAScript 2018 Standard Method

You would use object spread:

let merged = {...obj1, ...obj2};

merged is now the union of obj1 and obj2. Properties in obj2 will overwrite those in obj1.

/** There's no limit to the number of objects you can merge.
 *  Later properties overwrite earlier properties with the same name. */
const allRules = {...obj1, ...obj2, ...obj3};

Here is also the MDN documentation for this syntax. If you're using babel you'll need the babel-plugin-transform-object-rest-spread plugin for it to work.

ECMAScript 2015 (ES6) Standard Method

/* For the case in question, you would do: */
Object.assign(obj1, obj2);

/** There's no limit to the number of objects you can merge.
 *  All objects get merged into the first object. 
 *  Only the object in the first argument is mutated and returned.
 *  Later properties overwrite earlier properties with the same name. */
const allRules = Object.assign({}, obj1, obj2, obj3, etc);

(see MDN JavaScript Reference)


Method for ES5 and Earlier

for (var attrname in obj2) { obj1[attrname] = obj2[attrname]; }

Note that this will simply add all attributes of obj2 to obj1 which might not be what you want if you still want to use the unmodified obj1.

If you're using a framework that craps all over your prototypes then you have to get fancier with checks like hasOwnProperty, but that code will work for 99% of cases.

Example function:

/**
 * Overwrites obj1's values with obj2's and adds obj2's if non existent in obj1
 * @param obj1
 * @param obj2
 * @returns obj3 a new object based on obj1 and obj2
 */
function merge_options(obj1,obj2){
    var obj3 = {};
    for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
    for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
    return obj3;
}

answered Jan 29


There's a library called deepmerge on GitHub: That seems to be getting some traction. It's a standalone, available through both the npm and bower package managers.

I would be inclined to use or improve on this instead of copy-pasting code from answers.

answered Jan 29


You can simply use jQuery extend

var obj1 = { val1: false, limit: 5, name: "foo" };
var obj2 = { val2: true, name: "bar" };

jQuery.extend(obj1, obj2);

Now obj1 contains all the values of obj1 and obj2

answered Jan 29


We can merge different objects into one using the spread operator (...). This is also the most common method of merging two or more objects.

This is an immutable approach to merging two objects, i.e., the starting two objects which are used to make the merged one are not changed in any way due to side effects. In the end, you've got a new object, constructed from the two, while they're still intact.

Let's create two objects and merge them:

const person = {
    name: "John Doe",
    age: 24
}
const job = {
    title: "Full stack developer",
    location: "Remote"
}

const employee = {...person, ...job};

console.log(employee);

This results in:

{
    name: "John Doe", 
    age: 24, 
    title: "Full stack developer", 
    location: "Remote"
}

Note: If there are common properties between these two objects, such as both of them having a location, the properties from the second object (job) will overwrite the properties of the first object (person):

const person = {
    name: "John Doe",
    location: "Remote"
}
const job = {
    title: "Full stack developer",
    location: "Office"
}
const employee = {...person, ...job}

console.log(employee);

This results in:

{
  name: 'John Doe',
  location: 'Office',
  title: 'Full stack developer'
}

answered Jan 29


Login and Submit Your Answer
Browse other questions tagged  javascript  javascript-objects or ask your own question.