How to Remove Duplicates from an Array in TypeScript

One of my team members recently asked about removing duplicates from a TypeScript array. In this tutorial, I will explain how to remove duplicates from an array in TypeScript using different methods with examples.

Table of Contents

Remove Duplicates from an Array in TypeScript

Duplicate data can lead to inefficiencies and inaccuracies in your application. For instance, if you’re managing a list of cities for a travel app, having duplicates can skew your analytics and user experience. Removing duplicates ensures that each entry in your array is unique, leading to cleaner and more reliable data.

Now, let me show you different methods to remove duplicates from a TypeScript array with examples.

Using Set to Remove Duplicates

One of the simplest and most efficient ways to remove duplicates from an array in TypeScript is by using the Set object. A Set automatically enforces uniqueness, making it an ideal tool for this task.

Example: Removing Duplicate Cities

Let’s say you have an array of city names, some of which are duplicated:

let cities = ["New York", "Los Angeles", "Chicago", "New York", "Houston", "Phoenix", "Chicago"];

To remove duplicates using a Set, you can convert the array to a Set and then back to an array:

let cities = ["New York", "Los Angeles", "Chicago", "New York", "Houston", "Phoenix", "Chicago"];
let uniqueCities = Array.from(new Set(cities));
console.log(uniqueCities); // Output: ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix"]

This method is straightforward and efficient, especially for simple arrays of primitive values like strings or numbers.

You can see the exact output in the screenshot below after I executed the above TypeScript code using VS Code.

Remove Duplicates from an Array in TypeScript

Check out How to Split an Array in TypeScript?

Using Array.prototype.filter

Let me show you now another method.

You can also remove duplicates from a TypeScript array by using the filter() method. This method is particularly useful when you need more control over the uniqueness criteria, such as when working with arrays of objects.

Example: Removing Duplicate Objects

Consider an array of city objects, where each object has a name and a state property:

let cityObjects = [
    { name: "New York", state: "NY" },
    { name: "Los Angeles", state: "CA" },
    { name: "Chicago", state: "IL" },
    { name: "New York", state: "NY" },
    { name: "Houston", state: "TX" },
    { name: "Phoenix", state: "AZ" },
    { name: "Chicago", state: "IL" }
];

To remove duplicates based on the name property, you can use the filter method in combination with a Set to keep track of unique names:

let cityObjects = [
    { name: "New York", state: "NY" },
    { name: "Los Angeles", state: "CA" },
    { name: "Chicago", state: "IL" },
    { name: "New York", state: "NY" },
    { name: "Houston", state: "TX" },
    { name: "Phoenix", state: "AZ" },
    { name: "Chicago", state: "IL" }
];
let uniqueCityObjects = cityObjects.filter((city, index, self) => 
    index === self.findIndex((c) => (
        c.name === city.name
    ))
);

console.log(uniqueCityObjects);
// Output: [
//   { name: "New York", state: "NY" },
//   { name: "Los Angeles", state: "CA" },
//   { name: "Chicago", state: "IL" },
//   { name: "Houston", state: "TX" },
//   { name: "Phoenix", state: "AZ" }
// ]

This method ensures that each city object is unique based on the name property.

You can see the exact output in the screenshot below:

How to multiply string with an integer in python

Check out How to Check Array Equality in TypeScript?

Using Reduce for More Complex Scenarios

For more complex scenarios where you need to apply custom logic to determine uniqueness, the reduce method provides a powerful and flexible solution.

Example: Removing Duplicates with Custom Logic

Suppose you have an array of cities with additional properties, and you want to remove duplicates based on a combination of the name and state properties:

let complexCities = [
    { name: "New York", state: "NY", population: 8419000 },
    { name: "Los Angeles", state: "CA", population: 3980000 },
    { name: "Chicago", state: "IL", population: 2716000 },
    { name: "New York", state: "NY", population: 8419000 },
    { name: "Houston", state: "TX", population: 2328000 },
    { name: "Phoenix", state: "AZ", population: 1690000 },
    { name: "Chicago", state: "IL", population: 2716000 }
];

let uniqueComplexCities = complexCities.reduce((acc, current) => {
    const x = acc.find(item => item.name === current.name && item.state === current.state);
    if (!x) {
        return acc.concat([current]);
    } else {
        return acc;
    }
}, []);

console.log(uniqueComplexCities);
// Output: [
//   { name: "New York", state: "NY", population: 8419000 },
//   { name: "Los Angeles", state: "CA", population: 3980000 },
//   { name: "Chicago", state: "IL", population: 2716000 },
//   { name: "Houston", state: "TX", population: 2328000 },
//   { name: "Phoenix", state: "AZ", population: 1690000 }
// ]

By using reduce, you can implement any custom logic needed to determine the uniqueness of the elements in your array.

Read How to Get Distinct Values from an Array in TypeScript?

Performance Considerations

When choosing a method to remove duplicates, it’s important to consider the performance implications, especially for large arrays. Here’s a brief comparison:

Set: Best for simple arrays of primitive values. It has a time complexity of O(n) for insertion and lookup.
filter: Useful for arrays of objects with specific properties. It can be slower than Set for large datasets due to the need to iterate and compare each element.
reduce: Most flexible but can be the slowest due to the custom logic and multiple iterations.

Conclusion

In this tutorial, I explained how to remove duplicates from an array in TypeScript using different methods. You can use Set, filter, or reduce method in TypeScript to remove duplicates from an array. I have also explained the performance of each method and which one you should use.