One of my team members recently got a requirement to merge two arrays in TypeScript. I suggested a few methods. In this tutorial, I will explain how to merge arrays of objects in TypeScript using different examples.
Merge Arrays of Objects in TypeScript
When dealing with data in TypeScript, you may encounter situations where you need to merge two or more arrays of objects. For instance, let’s say you have an array of customer information from New York and another array with customer data from California. You want to combine these arrays into a single array containing all the customers.
Let me show you how to do this using various methods.
Method 1: Using the Spread Operator
One of the simplest ways to merge arrays in TypeScript is by using the spread operator (…). The spread operator allows you to unpack the elements of an array into a new array. Here’s an example:
const customersNY = [
{ name: 'John Smith', city: 'New York' },
{ name: 'Emily Johnson', city: 'Buffalo' }
];
const customersCA = [
{ name: 'Michael Davis', city: 'Los Angeles' },
{ name: 'Sarah Wilson', city: 'San Francisco' }
];
const allCustomers = [...customersNY, ...customersCA];
console.log(allCustomers);
Output:
[
{ name: 'John Smith', city: 'New York' },
{ name: 'Emily Johnson', city: 'Buffalo' },
{ name: 'Michael Davis', city: 'Los Angeles' },
{ name: 'Sarah Wilson', city: 'San Francisco' }
]
In this example, we have two arrays: customersNY
and customersCA
. By using the spread operator, we can easily merge these arrays into a new array called allCustomers
. The resulting array contains all the objects from both arrays.
Here is the exact output in the screenshot below:

The spread operator is a concise and readable way to merge arrays in TypeScript. It’s particularly useful when you have a small number of arrays to combine.
Check out Filter an Array of Objects by Multiple Properties in TypeScript
Method 2: Using the concat() Method
Another approach to merge arrays in TypeScript is by using the concat()
method. The concat()
method creates a new array by merging two or more arrays together. Here’s an example:
const employeesNY = [
{ name: 'David Brown', department: 'Sales' },
{ name: 'Amanda Taylor', department: 'Marketing' }
];
const employeesCA = [
{ name: 'Robert Anderson', department: 'Engineering' },
{ name: 'Jennifer Thomas', department: 'Finance' }
];
const allEmployees = employeesNY.concat(employeesCA);
console.log(allEmployees);
Output:
[
{ name: 'David Brown', department: 'Sales' },
{ name: 'Amanda Taylor', department: 'Marketing' },
{ name: 'Robert Anderson', department: 'Engineering' },
{ name: 'Jennifer Thomas', department: 'Finance' }
]
In this example, we have two arrays of employee objects: employeesNY
and employeesCA
. By using the concat()
method on employeesNY
and passing employeesCA
as an argument, we merge the two arrays into a new array called allEmployees
.
Here is the exact output in the screenshot below:

The concat()
method is straightforward and allows you to merge multiple arrays at once. It’s a good choice when you need to combine several arrays.
Read Get Unique Values from an Array of Objects in TypeScript
Method 3: Merge Arrays with Unique Values
Sometimes, you may want to merge arrays while ensuring that the resulting array contains only unique objects. In other words, if an object exists in both arrays, it should appear only once in the merged array. Here’s an example of how to achieve this:
const studentsNY = [
{ name: 'William Lee', grade: 10 },
{ name: 'Olivia Hernandez', grade: 11 },
{ name: 'James Martinez', grade: 12 }
];
const studentsCA = [
{ name: 'Sophia Garcia', grade: 10 },
{ name: 'Olivia Hernandez', grade: 11 },
{ name: 'Daniel Rodriguez', grade: 12 }
];
const uniqueStudents = [...new Set([...studentsNY, ...studentsCA])];
console.log(uniqueStudents);
Output:
[
{ name: 'William Lee', grade: 10 },
{ name: 'Olivia Hernandez', grade: 11 },
{ name: 'James Martinez', grade: 12 },
{ name: 'Sophia Garcia', grade: 10 },
{ name: 'Daniel Rodriguez', grade: 12 }
]
In this example, we have two arrays of student objects: studentsNY
and studentsCA
. We want to merge these arrays while ensuring that each student appears only once in the merged array.
To achieve this, we use the Set
object in combination with the spread operator. First, we spread both arrays into a new Set
. The Set
object automatically removes any duplicate elements. Then, we spread the Set
back into a new array called uniqueStudents
.
This approach is useful when you want to merge arrays and eliminate any duplicate objects based on their property values.
Check out Remove Duplicates from an Array of Objects in TypeScript
Merge Arrays of Objects with Different Properties
In some cases, you may need to merge arrays of objects that have different properties. For example, let’s say you have an array of customer information with properties like name
and email
, and another array with additional properties like phone
and address
. You want to merge these arrays based on a common property, such as email
. Here’s an example of how to handle this scenario:
const customersInfo = [
{ name: 'Jessica Hernandez', email: 'jessica@example.com' },
{ name: 'Andrew Young', email: 'andrew@example.com' }
];
const customersDetails = [
{ email: 'andrew@example.com', phone: '123-456-7890', address: '123 Main St' },
{ email: 'jessica@example.com', phone: '987-654-3210', address: '456 Elm St' }
];
const mergedCustomers = customersInfo.map(customer => ({
...customer,
...customersDetails.find(detail => detail.email === customer.email)
}));
console.log(mergedCustomers);
Output:
[
{
name: 'Jessica Hernandez',
email: 'jessica@example.com',
phone: '987-654-3210',
address: '456 Elm St'
},
{
name: 'Andrew Young',
email: 'andrew@example.com',
phone: '123-456-7890',
address: '123 Main St'
}
]
In this example, we have two arrays: customersInfo
and customersDetails
. The customersInfo
array contains basic customer information, while the customersDetails
array contains additional details for each customer.
To merge these arrays based on the email
property, we use the map()
method on customersInfo
. For each customer object, we spread the customer object itself and then use the find()
method to search for the corresponding customer details in the customersDetails
array based on the email
property. The resulting merged objects are stored in the mergedCustomers
array.
This approach allows you to merge arrays of objects with different properties by using a common property as the matching criterion.
Conclusion
In this tutorial, we explored various methods to merge arrays of objects in TypeScript. We learned how to use the spread operator to combine arrays, how to use the concat()
method to merge multiple arrays, how to merge arrays with unique values, and how to merge arrays with different properties based on a common property.
You may also like:
- Sort an Array of Objects by Property Value in TypeScript
- How to Filter an Array of Objects in TypeScript?
I’m Bijay Kumar Sahoo, and I am honored to be awarded the Microsoft MVP. With over 18 years of experience in the IT industry, I got a chance to work on SharePoint Framework (SPFx) development, TypeScript, React, JavaScript, etc. My journey has taken me through esteemed organizations such as TCS, HP, and KPIT, where I have honed my skills and expanded my expertise. Check out more about me here.