How to Merge Arrays of Objects in TypeScript?

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:

Merge Arrays of Objects in TypeScript

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:

How to Merge Arrays of Objects in TypeScript

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: