Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to merge two JavaScript objects?
Merging two JavaScript objects combines their properties into a single object. There are several methods to achieve this, with the spread operator being the most modern and widely used approach.
Using the Spread Operator (Recommended)
The spread operator (...) is the cleanest and most readable way to merge objects:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Merge JavaScript Objects</title>
</head>
<body>
<h1>Merge Two JavaScript Objects</h1>
<div id="result"></div>
<button onclick="mergeObjects()">MERGE OBJECTS</button>
<script>
function mergeObjects() {
let person = {
name: "Rohan",
age: 22,
city: "Mumbai"
};
let address = {
state: "Maharashtra",
country: "India",
pincode: 400001
};
// Merge using spread operator
let mergedObj = { ...person, ...address };
let result = document.getElementById("result");
result.innerHTML = "<h3>Merged Object:</h3>";
for (let key in mergedObj) {
result.innerHTML += `<p><strong>${key}:</strong> ${mergedObj[key]}</p>`;
}
}
</script>
</body>
</html>
Using Object.assign()
Another approach is using Object.assign(), which copies properties from source objects to a target object:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Object.assign() Method</title>
</head>
<body>
<h1>Using Object.assign()</h1>
<div id="output"></div>
<button onclick="assignMethod()">USE OBJECT.ASSIGN</button>
<script>
function assignMethod() {
let obj1 = { a: 1, b: 2 };
let obj2 = { c: 3, d: 4 };
let obj3 = { e: 5, f: 6 };
// Merge multiple objects
let merged = Object.assign({}, obj1, obj2, obj3);
document.getElementById("output").innerHTML =
`<p>Result: ${JSON.stringify(merged)}</p>`;
}
</script>
</body>
</html>
Handling Property Conflicts
When objects have the same property names, the last object's values take precedence:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Property Conflicts</title>
</head>
<body>
<h1>Property Conflicts Example</h1>
<div id="conflict-result"></div>
<button onclick="showConflict()">SHOW CONFLICT RESOLUTION</button>
<script>
function showConflict() {
let user1 = { name: "John", age: 25, role: "user" };
let user2 = { age: 30, role: "admin", email: "john@email.com" };
let merged = { ...user1, ...user2 };
let output = document.getElementById("conflict-result");
output.innerHTML = `
<h3>Original Objects:</h3>
<p>user1: ${JSON.stringify(user1)}</p>
<p>user2: ${JSON.stringify(user2)}</p>
<h3>Merged (user2 overwrites conflicts):</h3>
<p>${JSON.stringify(merged)}</p>
`;
}
</script>
</body>
</html>
Comparison
| Method | Syntax | Browser Support | Performance |
|---|---|---|---|
| Spread Operator | {...obj1, ...obj2} |
ES2018+ | Fast |
| Object.assign() | Object.assign({}, obj1, obj2) |
ES2015+ | Good |
Key Points
- Both methods create shallow copies of the original objects
- Properties from later objects override earlier ones with the same name
- The spread operator is more concise and readable
- For deep merging nested objects, consider using libraries like Lodash
Conclusion
The spread operator {...obj1, ...obj2} is the preferred method for merging JavaScript objects due to its clean syntax and excellent browser support. Use Object.assign() when you need to support older browsers or want to merge into an existing object.
Updated on: 2026-03-15T23:18:59+05:30
517 Views
Advertisements