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-proposal-object-rest-spread plugin for it to work (This plugin is included in @babel/preset-env, in ES2018).

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

additionally :- check this program for see differnce between Object.assign & spread syntax object literals

Top answer
1 of 16
4198

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-proposal-object-rest-spread plugin for it to work (This plugin is included in @babel/preset-env, in ES2018).

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

additionally :- check this program for see differnce between Object.assign & spread syntax object literals

2 of 16
1245

jQuery also has a utility for this: http://api.jquery.com/jQuery.extend/.

Taken from the jQuery documentation:

// Merge options object into settings object
var settings = { validate: false, limit: 5, name: "foo" };
var options  = { validate: true, name: "bar" };
jQuery.extend(settings, options);

// Now the content of settings object is the following:
// { validate: true, limit: 5, name: "bar" }

The above code will mutate the existing object named settings.


If you want to create a new object without modifying either argument, use this:

var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };

/* Merge defaults and options, without modifying defaults */
var settings = $.extend({}, defaults, options);

// The content of settings variable is now the following:
// {validate: true, limit: 5, name: "bar"}
// The 'defaults' and 'options' variables remained the same.
๐ŸŒ
Programiz
programiz.com โ€บ javascript โ€บ examples โ€บ merge-property-objects
JavaScript Program to Merge Property of Two Objects
To understand this example, you ... 'Jack', age:26 } // object 2 const student = { gender: 'male' } // merge two objects const newObj = Object.assign(person, student); console.log(newObj);...
Discussions

How to merge two arrays of objects into a new one
Not sure if this help, but have you looked at lodash zipwith method? https://lodash.com/docs/4.17.10#zipWith More on reddit.com
๐ŸŒ r/javascript
21
27
July 27, 2018
how to update an object without overwriting previous content?

Can you explain more about what you're trying to do? You have 2 properties, and then you're trying to "add" the second property to the object again? Is this a different value? - something that should have a different name... But can't for some reason?

More on reddit.com
๐ŸŒ r/javascript
25
2
December 17, 2016
Is there a benefit to using lodash.merge (or other utilities of the same feature) versus merging via object destructuring?
Yes, absolutely. Lodash merge recursively merges properties at every level. If you merged two objects with destructuring (or lodash.assign or Object.assign which are equivalent), it drops anything that is not top-level from the first object. See: https://lodash.com/docs#merge More on reddit.com
๐ŸŒ r/node
13
4
November 14, 2022
๐ŸŒ
Mastering JS
masteringjs.io โ€บ tutorials โ€บ fundamentals โ€บ merge-two-objects
How to Merge Two Objects in JavaScript - Mastering JS
April 29, 2022 - If there's two properties with the same name, the property from the second object wins out. const obj1 = { a: 1, b: 2, c: 3 }; const obj2 = { d: 4, e: 5, f: 6 }; const obj3 = {...obj1, ...obj2}; // { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 } let user = { name: 'John Smith', age: 29 }; const changes = { name: 'John A. Smith' }; user = { ...user, ...changes }; // { name: 'John A. Smith', age: 29 } If you want to merge the second object into the first object, instead of creating a new object, you can use Object.assign().
๐ŸŒ
Vultr Docs
docs.vultr.com โ€บ javascript โ€บ examples โ€บ merge-property-of-two-objects
JavaScript Program to Merge Property of Two Objects | Vultr Docs
December 17, 2024 - ... This technique creates a new object entirely, ensuring that neither object1 nor object2 is modified during the process. Use Object.assign() to combine the properties of two objects into a new object.
๐ŸŒ
CoreUI
coreui.io โ€บ blog โ€บ how-to-merge-objects-in-javascript
How to Merge Objects in JavaScript ยท CoreUI
February 27, 2024 - Shallow merging is straightforward in JavaScript, thanks to modern ES6 features like the spread operator (...) and the Object.assign() method. Introduced in ES6, the spread operator (...) has become a go-to for many developers due to its concise ...
๐ŸŒ
Tutorial Republic
tutorialrepublic.com โ€บ faq โ€บ how-to-merge-the-properties-of-two-javascript-objects.php
How to Merge the Properties of Two JavaScript Objects
// Sample objects var target = { a: "Apple", b: "Ball" }; var source = { x: 1, y: 4 }; // Merging source object into target object var returnedTarget = Object.assign(target, source); console.log(returnedTarget); // Prints: {a: "Apple", b: "Ball", x: 1, y: 4} console.log(target); // Prints: {a: "Apple", b: "Ball", x: 1, y: 4} Please note that only the first object in the list of arguments will be modified and returned. Also, later properties will overwrite earlier properties if they have the same name. See the tutorial on JavaScript Objects to learn more about creating and manipulating objects.
๐ŸŒ
JavaScript Tutorial
javascripttutorial.net โ€บ home โ€บ javascript merge objects
How to Merge Objects in JavaScript
March 29, 2020 - ES6 introduced the spread operator (...) which can be used to merge two or more objects and create a new one that has properties of the merged objects. The following example uses the spread operator (...) to merge the person and job objects ...
Find elsewhere
๐ŸŒ
W3docs
w3docs.com โ€บ javascript
How to Merge Properties of Two JavaScript Objects Dynamically
The Object.assign() method is one of the constructor methods. It is used for copying values and properties from a single or more source objects to a target one.
๐ŸŒ
Scaler
scaler.com โ€บ home โ€บ topics โ€บ javascript merge objects
JavaScript Merge Objects - Scaler Topics
May 4, 2023 - Explanation Here in this example, we are using lodash library's _.merge() function to merge two objects, what it does is, it recursively merges properties of the source object into the target object. Here even if the keys are identical, then instead of overwriting the complete object, it simply ...
๐ŸŒ
Stack Abuse
stackabuse.com โ€บ merge-properties-of-two-objects-dynamically-in-javascript
Merge Properties of Two Objects Dynamically in JavaScript
October 4, 2023 - Another common way to merge two or more objects is to use the built-in Object.assign() method: ... This method copies all the properties from one or more source objects into the target object.
๐ŸŒ
Flavio Copes
flaviocopes.com โ€บ home โ€บ javascript โ€บ how to merge two objects in javascript
How to merge two objects in JavaScript - Flavio Copes
September 18, 2026 - To merge two objects in JavaScript, use the spread operator. It copies the properties of both objects into a new one.
๐ŸŒ
TutorialsPoint
tutorialspoint.com โ€บ how-to-merge-properties-of-two-javascript-objects-dynamically
How to merge properties of two JavaScript Objects dynamically?
July 30, 2019 - <html> <body> <script> var target = { a: "ram", b: "rahim" }; var source = { b: "akbar", d: "anthony" }; var returnedTarget = Object.assign(target, source); document.write(JSON.stringify(target)); document.write("</br>"); document.write(JSON.stringify(returnedTarget)); </script> </body> </html>
๐ŸŒ
GeeksforGeeks
geeksforgeeks.org โ€บ javascript โ€บ how-to-merge-properties-of-two-javascript-objects-dynamically
How to Merge Properties of Two JavaScript Objects Dynamically? - GeeksforGeeks
July 11, 2025 - ... let A = { name: "geeksforgeeks", }; let B = { domain: "https://www.geeksforgeeks.org/" }; let Sites = { ...A, ...B }; console.log(Sites) ... We can also use the Object.assign() method to merge different objects. that function helps us to ...
๐ŸŒ
SitePoint
sitepoint.com โ€บ blog โ€บ javascript โ€บ how to merge objects in javascript
How to Merge Objects in JavaScript โ€” SitePoint
November 5, 2024 - In this article, Iโ€™ll cover some practical applications of these methods, their strengths and weaknesses, and the concept of deep copying before merging nested objects. ... The spread operator (...) is a common approach to merge objects in ...
๐ŸŒ
Educative
educative.io โ€บ answers โ€บ how-to-merge-properties-of-two-javascript-objects-dynamically
How to merge properties of two JavaScript objects dynamically
Note: If both the objects have a similar key then the value of the key of the object that appeared last is used. We can merge the properties of two objects using the Object.assign() method as below:
๐ŸŒ
TutorialsPoint
tutorialspoint.com โ€บ article โ€บ how-to-merge-two-javascript-objects
How to merge two JavaScript objects?
March 15, 2026 - <!DOCTYPE html> <html lang="en"> ... id="result"></div> <button onclick="mergeObjects()">MERGE OBJECTS</button> <script> function mergeObjects() { let person = { name: "Rohan", age: 22, city: "Mumbai" }; let address = { state: ...
๐ŸŒ
Techie Delight
techiedelight.com โ€บ home โ€บ java โ€บ merge properties of two or more objects in javascript
Merge properties of two or more objects in JavaScript | Techie Delight
July 7, 2026 - With jQuery, you can use the $.extend() method, which copies all properties from the specified object to the target object and return the target object. The $.extend() method can merge an arbitrary number of objects.
๐ŸŒ
Atomizedobjects
atomizedobjects.com โ€บ blog โ€บ javascript โ€บ how-to-merge-two-objects-in-javascript
How to merge two objects in JavaScript | Atomized Objects
To merge two objects without overwriting in JavaScript is a little similar to the manual deep merge. If you have a nested object but you donโ€™t want to overwrite the property you just need to spread the two properties into a new version of the property.
๐ŸŒ
Byby
byby.dev โ€บ js-merge-objects
5 ways to merge two objects in JavaScript
Another difference is that the spread operator always gives you a plain object back, while Object.assign() can preserve the prototype of the target object. There are some other minor differences such as how they handle getters and setters, symbols, and non-enumerable properties. ... This is a utility used for deep merging objects, recursively combine properties from multiple objects, including nested properties, to create a new merged object.
๐ŸŒ
TutorialsPoint
tutorialspoint.com โ€บ article โ€บ javascript-program-to-merge-two-objects-into-a-single-object-and-adds-the-values-for-same-keys
JavaScript program to merge two objects into a single object and adds the values for same keys
March 15, 2026 - const obj3 = { a: 10, b: 20, c: 30 }; const obj4 = { a: 5, b: 15, d: 40 }; const mergeAndAdd = (target, source) => { Object.keys(source).forEach(key => { target[key] = target[key] ?