How to Concat Array of Objects in JavaScript

In this article, we will show you how to concatenate arrays of objects in JavaScript.

By combining several arrays into a single array, we can perform different operations effectively.

What is an Array in JavaScript?

An array in JavaScript is a data structure that enables you to store multiple values in a single variable.

It is a compilation of elements that can be accessed by their index. Arrays are functional and can store different types of data, including numbers, strings, objects, and even other arrays.

Understanding Objects in JavaScript

In JavaScript, objects are complicated data types that enable you to store key-value pairs.

An object that contains properties, where each property has a name (or key) and a corresponding value.

Objects are generally used to represent real-world entities and enable structured data storage.

When working with arrays of objects, it is important to understand how objects are structured and accessed.

Methods to Concat Array of Objects in JavaScript

Here are the following methods to concat array of objects in JavaScript.

1. Concatenating Arrays Using the Concat Method

JavaScript provides the concat method, which enables you to concatenate arrays together.

This method returns a new array that consists of the elements of the original arrays.

To concatenate array objects, we can use the concat method and pass the arrays as arguments.

const exampleArray1 = [{ id: 1, name: 'Glenn' }, { id: 2, name: 'Jude' }];
const exampleArray2 = [{ id: 3, name: 'Caren' }, { id: 4, name: 'Eliver' }];

const concatenatedSampleArray = exampleArray1.concat(exampleArray2);
console.log(concatenatedSampleArray);

Output:

The concatenatedSampleArray will consist of the elements from exampleArray1 followed by the elements from exampleArray2. The original arrays remain consistent.

2. Using the Spread Operator to Concatenate Arrays

Another method to concatenate arrays is by using the spread operator (…).

The spread operator enables you to expand an array into individual elements.

By combining several arrays using the spread operator, you can make a new concatenated array.

Here’s an example code:

const exampleArray1 = [{ id: 1, name: 'Glenn' }, { id: 2, name: 'Jude' }];
const exampleArray2 = [{ id: 3, name: 'Caren' }, { id: 4, name: 'Eliver' }];

const concatenatedSampleArray = [...exampleArray1, ...exampleArray2];
console.log(concatenatedSampleArray);

In this example code, the spread operator is used to combine exampleArray1 and exampleArray2 into concatenatedSampleArray.

The result is the same as the concat method, a new array consisting all the elements from the original arrays.

3. Merging Arrays Using the Push Method

If we want to change one of the arrays in place and append the elements of another array, we can use the push method.

The push method adds one or more elements to the end of an array.

By iterating over the elements of the second array and pushing them into the first array, we can combine the arrays.

Here’s an example code:

const sampleArray1 = [{ id: 1, name: 'Greg' }, { id: 2, name: 'Robert' }];
const sampleArray2 = [{ id: 3, name: 'Landice' }, { id: 4, name: 'Fernan' }];

sampleArray1.push(...sampleArray2);
console.log(sampleArray1);

After running this code, sampleArray1 will consist of all the elements from sampleArray2 appended at the end. The original sampleArray2 remains consistent.

4. Combining Arrays with the Apply Method

The apply method, although less generally used, can also be used to concatenate arrays in JavaScript.

The apply method calls a function with a provided value and arguments provided as an array or an array-like object.

By approving null as this value and the arrays as arguments, you can concatenate them.

Here’s an example code:

const sampleArray1 = [10, 20, 30];
const sampleArray2 = [40, 50, 60];
const sampleArray3 = [70, 80, 90];

const concatenatedSampleArray = [].concat.apply([], [sampleArray1, sampleArray2, sampleArray3]);
console.log(concatenatedSampleArray);

Using [].concat.apply([], [sampleArray1, sampleArray2, sampleArray3]), we can obtain the proper concatenation of the three arrays by applying the concat method.

With this value set to an empty array and passing [sampleArray1, sampleArray2, sampleArray3] as the arguments.

5. Joining Arrays Using the Reduce Method

The reduce method in JavaScript allows you to reduce an array into a single value.

However, you can also use it to concatenate arrays by merging their elements.

The reduce method takes a callback function that engages on each element of the array, expanding the result into a single value.

Here’s an example code:

const exampleArray1 = [{ id: 1, name: 'Robert' }, { id: 2, name: 'Romeo' }];
const exampleArray2 = [{ id: 3, name: 'Jake' }, { id: 4, name: 'Kris' }];

const concatenatedExampleArray = [exampleArray1, exampleArray2].reduce((acc, curr) => acc.concat(curr), []);
console.log(concatenatedExampleArray);

In this example code, the reduce method concatenates the elements of exampleArray1 and exampleArray2 by using the concat method inside the callback function.

The basic value [] passed as the second argument performs an empty array where the concatenation will begin.

6. Concatenating Arrays with the ES6 Array.from Method

The ES6 Array.from method provides a succinct way to create a new array from an iterable object.

By passing numerous arrays as the argument, we can concatenate them into a single array.

Here’s an example code:

const arrayExample1 = [{ id: 1, name: 'Glenn' }, { id: 2, name: 'Jude' }];
const arrayExample2 = [{ id: 3, name: 'Caren' }, { id: 4, name: 'Eliver' }];

const concatenatedArrayExample = Array.from([...arrayExample1, ...arrayExample2]);
console.log(concatenatedArrayExample);

In this example code, the spread operator (…) is used to concatenate arrayExample1 and arrayExample2 into a single array.

Then, Array.from() is used to convert the concatenated array into a new array.

Finally, the result is logged into the console. The output will be an array that consists of all the objects from both arrayExample1 and arrayExample2.

7. Creating a Custom Concatenation Function

When you prefer a custom method, you can create your own function to concatenate arrays of objects in JavaScript.

Here’s an example code of a custom concatenation function:

function concatArraysExample(...arrays) {
  return [].concat(...arrays);
}

const arrayExample1 = [{ id: 1, name: 'Ramon' }, { id: 2, name: 'Jonel' }];
const arrayExample2 = [{ id: 3, name: 'Meriam' }, { id: 4, name: 'Rodel' }];

const concatenatedExampleArray = concatArraysExample(arrayExample1, arrayExample2);
console.log(concatenatedExampleArray);

The concatArraysExample function accepts any number of arrays as arguments using the rest parameter (…).

Inside the function, the spread operator (…) is used along with the concat method to concatenate the arrays.

FAQs

Conclusion

Concatenating arrays of objects in JavaScript is an effective method when working with complicated data structures.

By using methods like concat, spread operator, push, apply, reduce, and Array.from, you can effectively combine several arrays into a single array.

Additional Resources

• How to Update Value in JavaScript
• How to call JavaScript function in html without button
• How to check if an element is focused in JavaScript