If your environment supports Object.assign, then you can do the same in a succinct way like this

const arrObj = [{a: 1, b: 2}, {c: 3, d: 4}, {e: 5, f: 6}];

console.log(arrObj.reduce(function(result, current) {
  return Object.assign(result, current);
}, {}));

// If you prefer arrow functions, you can make it a one-liner ;-)
console.log(arrObj.reduce(((r, c) => Object.assign(r, c)), {}));

// Thanks Spen from the comments. You can use the spread operator with assign
console.log(Object.assign({}, ...arrObj));


ES5 solution:

You can use Array.prototype.reduce like this

var resultObject = arrObj.reduce(function(result, currentObject) {
    for(var key in currentObject) {
        if (currentObject.hasOwnProperty(key)) {
            result[key] = currentObject[key];
        }
    }
    return result;
}, {});

console.log(resultObject);
# { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }

This solution, simply gathers all the keys and their values in every object in the result, which is finally returned to us as the result.

This check

if (currentObject.hasOwnProperty(key)) {

is necessary to make sure that we are not including all the inherited enumerable properties in the result.

Answer from thefourtheye on Stack Overflow
🌐
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 into the employee object: let person = { firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356' }; let job = { jobTitle: 'JavaScript Developer', location: 'USA' }; let employee = { ...person, ...job }; console.log(employee); Copy
Discussions

JavaScript: generated object with multiple objects inside -> one object - Stack Overflow
this is how my object looks like: , but I need just one object like obj = { var: "DB3,B0", zahl: "DB3,Int2", zahl2: "DB3,Int4", ... ... }; How do I convert... More on stackoverflow.com
🌐 stackoverflow.com
September 17, 2018
JavaScript - Store multiple objects in array and access their properties via - Stack Overflow
Bring the best of human thought and AI automation together at your work. Explore Stack Internal ... So here I have a database of user objects and I would like to push each one into the 'allUsers' array. I then want to be able to loop through this array and access a property e.g. More on stackoverflow.com
🌐 stackoverflow.com
node.js - How to convert multiple object to just one object with Javascript? - Stack Overflow
As you can see i have a multiple object like "123", "098", and "456", i want all of those object to be inside the object of multiple object. Example: var obj = { &q... More on stackoverflow.com
🌐 stackoverflow.com
javascript - add multiple objects to object - Stack Overflow
I want to combine and add few objects into a new object. More on stackoverflow.com
🌐 stackoverflow.com
May 17, 2021
🌐
W3Resource
w3resource.com › javascript-exercises › fundamental › javascript-fundamental-exercise-178.php
JavaScript fundamental (ES6 Syntax): Create a new object from the combination of two or more objects - w3resource
Use Array.prototype.reduce() combined with Object.keys() to iterate over all objects and keys. Use Object.prototype.hasOwnProperty() and Array.prototype.concat() to append values for keys existing in multiple objects.
🌐
CodeSpeedy
codespeedy.com › home › merge multiple objects in javascript
Merge Multiple Objects in JavaScript - CodeSpeedy
November 26, 2019 - That means we are able to merge the three objects into a single one just by using three dots before each object variable. The power of three dots is amazing. It is able to let us do the task easily.
🌐
DEV Community
dev.to › benjaminmock › js-merging-multiple-objects-into-one-2l54
JS - 💡 Merging multiple objects into one - DEV Community
January 26, 2020 - Without using any libraries there are two ways to do this in JavaScript: ... const a = { x: "x", y: "y" } const b = { z: "z" } // create a new object and assign a & b const c = Object.assign({}, a, b) console.log(c) // {x: "x", y: "y", z: "z"} The same works also with the object spread operator: const a = { x: "x", y: "y" } const b = { z: "z" } // create a new object and spread a & b const c = { ...a, ...b } console.log(c) // {x: "x", y: "y", z: "z"} Cool, so we can now merge multiple objects into one.
Find elsewhere
🌐
YouTube
youtube.com › chart js
Multiple Objects JavaScript - YouTube
Multiple Objects JavaScript. In this video you will learn about having multiple object values in JavaScript. Object is one of the most important items to lea...
Published: February 25, 2021
Views: 3K
🌐
30 Seconds of Code
30secondsofcode.org › home › javascript › object › merge objects
Merge two or more JavaScript objects - 30 seconds of code
March 20, 2024 - In order to perform this, we can use Object.keys() to iterate over all objects and keys, and Object.prototype.hasOwnProperty() to check if the key already exists in the resulting object. Then, we can use Array.prototype.concat() to append the values for keys that exist in multiple objects...
🌐
SitePoint
sitepoint.com › blog › javascript › how to merge objects in javascript
How to Merge Objects in JavaScript — SitePoint
November 5, 2024 - Developers often need to merge or copy objects for tasks like combining data or creating new instances. Techniques like the spread ( ... ) operator (used for merging properties of multiple objects) and the Object.assign() method (for copying properties from one object to another) are essential tools for these tasks.
Top answer
1 of 4
20

To just add the variables to the array, there's really no other way except to do exactly what you did in your example, which is to manually add each variable to your array.

// Users array
var allUsers = [
    user,
    jon,
    lucy,
    mike,
    luke,
    james,
    dave,
    sarah,
    natalie
];

BUT, you could probably do something a little more robust, which in its simplest form is to define an object literal called users that contains each user object. Then you not only have the added benefit of a pseudo-namespacing around your users, you can easily iterate over the object literal and put each user into an array, as such:

// Users
var users = {
    user : {username: user9110252username, genrePref: user9110252genre},
    jon : {username: 'Jon', genrePref: 'rock'},
    lucy : {username: 'Lucy', genrePref: 'pop'},
    mike : {username: 'Mike', genrePref: 'rock'},
    luke : {username: 'Luke', genrePref: 'house'},
    james : {username: 'James', genrePref: 'house'},
    dave : {username: 'Dave', genrePref: 'bass'},
    sarah : {username: 'Sarah', genrePref: 'country'},
    natalie : {username: 'Natalie', genrePref: 'bass'}
}

// Users array
var allUsers = [];

// Populate users array
for(var key in users) {
    allUsers.push(users[key]);
}

One last note on style. You should probably avoid explicitly setting the 'key' of each user object in your users object literal to be the name of the user. If you have any users with the same name, this model will break. Instead, consider generating some kind of unique key, like a guid, or some other unique value for each user. That way you'll never accidentally overwrite an entry in your users object if, for example, you are populating this users object from some database and two or more users happen to have the same name.

Good luck.

2 of 4
2

	 var arr = [{username: 'Jon', genrePref: 'rock'},{username: 'Lucy', genrePref: 'pop'},{username: 'Mike', genrePref: 'rock'},{username: 'Luke', genrePref: 'house'},{username: 'James', genrePref: 'house'},{username: 'Dave', genrePref: 'bass'},{username: 'Sarah', genrePref: 'country'},{username: 'Natalie', genrePref: 'bass'}];
	
	var text = "<table border ='1'><tr><th>Username</th><th>genrePref</th></tr>"
	for (var i=0;i<arr.length;i++){
     text+="<tr><td>"+arr[i].username+"</td><td>"+arr[i].genrePref+"</td></tr>"				
	}
	text+="</table>";
    document.write(text);
<html>
<head>
	<title>Javascript</title>
</head>
<body>
</body>
</html>

🌐
CoreUI
coreui.io › blog › how-to-merge-objects-in-javascript
How to Merge Objects in JavaScript · CoreUI
February 27, 2024 - Object.assign() is another popular choice for shallow merging. This method copies the properties from one or more source objects to a target object, which it returns. Like the spread operator, it overwrites properties in the target object with those from the source objects if they share the same name.
🌐
YouTube
youtube.com › watch
Javascript Tutorial to Merge Properties of Multiple Objects Using Object.assign & Spread Operator - YouTube
Buy the full source code of application here:https://procodestore.com/index.php/product/javascript-tutorial-to-merge-properties-of-multiple-objects-using-obj...
Published: October 17, 2021
🌐
Medium
medium.com › swlh › merging-javascript-objects-b89af94d5b59
Merging JavaScript Objects. A short guide to creating a new object… | by Michael McShinsky | The Startup | Medium
February 22, 2021 - The spread operator was introduced with ES6 and allows us to merge multiple arguments or objects and returns a new combined value anywhere defined in your code. If any of the objects or values added to the spread operation share the same property or name (e.g. “firstName”), the last one passed into your operation will be the value taken and overwrites any earlier values with the same key when creating your new object.
🌐
TutorialsPoint
tutorialspoint.com › create-many-javascript-objects-as-the-same-type
Create many JavaScript objects as the same type?
August 23, 2022 - For creating multiple objects of the same type, constructor functions and ES6 classes are the most effective approaches.
🌐
YouTube
youtube.com › watch
Merge Properties of Multiple JavaScript Objects | JavaScript Arrays & Objects for Beginners - YouTube
Can we have a new object that will have properties from multiple objects, in JavaScript? This is very important concept in ES6. You gonna see it and use it i...
Published: January 10, 2022