Remove Duplicate Array Values in TypeScript with Set

Yes, you can remove duplicate values from an array in TypeScript by passing the array to the Set constructor and then converting it back to an array. This works for primitive values (strings, numbers, booleans) and is the simplest, most readable approach in modern TypeScript.

How Set Removes Duplicates

The Set object is a built-in JavaScript (and therefore TypeScript) collection that stores unique values of any type. When you pass an iterable like an array to new Set(array), the Set constructor iterates over the array and adds each element to the Set. Because a Set cannot contain duplicate values, any repeated element is automatically ignored. The order of elements is preserved based on the first occurrence in the original array.

To get back an array, you can use either the spread operator ([...new Set(arr)]) or Array.from(new Set(arr)). Both produce the same result. The spread operator is more concise and is the most common choice in TypeScript codebases.

TypeScript Type Considerations

When using Set with TypeScript, the type of the resulting array is inferred correctly. For example, if you have const arr: string[] = ['a', 'b', 'a'], then const unique: string[] = [...new Set(arr)] will be typed as string[]. This works because Set is generic and infers the element type from the input array.

If you are dealing with a union of types (e.g., (string | number)[]), the Set will preserve that union type. However, if you want to explicitly type the Set, you can write new Set(arr) to enforce a specific type.

Handling Objects and References

One important caveat: Set uses the SameValueZero algorithm for equality, which means it compares objects by reference, not by content. So if you have an array of objects, [...new Set(arr)] will only remove duplicate object references, not objects with identical properties. For example:

const arr = [{id: 1}, {id: 1}];
const unique = [...new Set(arr)]; // both objects remain because they are different references

To remove duplicates based on a property or deep equality, you need a different approach, such as using filter with a Map or a custom comparison function.

Performance and Alternatives

Using Set is generally the fastest method for primitive arrays, as it runs in O(n) time. The filter + indexOf approach is O(n^2) and can be slow for large arrays. Another alternative is using reduce to build a result array while checking for existing values, but that is also O(n^2) if you use includes.

For large arrays, Set is the recommended choice. If you need to preserve the original order, Set does that automatically. If you don’t care about order, you can also use a plain object or a Map as a lookup, but Set is cleaner.

Edge Cases and Pitfalls

• NaN and +0/-0: Set treats NaN as equal to NaN, and +0 and -0 as the same value, so duplicates are removed correctly.
• Empty array: Passing an empty array to Set returns an empty Set, and spreading it gives an empty array.
• Mixed types: Set treats 1 and “1” as different, so they are both kept.
• Null and undefined: These are treated as distinct values, so if both appear, both are kept.

Code Examples

Here are a few practical examples you can copy into your TypeScript project:

// Basic usage
const numbers = [1, 2, 2, 3, 3, 3];
const uniqueNumbers = [...new Set(numbers)]; // [1, 2, 3]

// With strings
const words = ['apple', 'banana', 'apple', 'cherry'];
const uniqueWords = Array.from(new Set(words)); // ['apple', 'banana', 'cherry']

// TypeScript generic with explicit type
const mixed: (string | number)[] = [1, '1', 2, 2];
const uniqueMixed = [...new Set(mixed)]; // [1, '1', 2]

Frequently Asked Questions

Does Set work with all data types?

Yes, Set can hold any JavaScript value, including objects, functions, and primitives. However, for objects, it compares references, not deep equality.

Can I remove duplicates from an array of objects?

Not directly with Set. You need to map objects to a unique key (e.g., id) and then use a Map or filter to keep the first occurrence of each key.

Is there a performance difference between spread and Array.from?

Both are similar in performance. Spread is slightly more concise and is the common idiom. For very large arrays, the difference is negligible.

Does Set preserve the original order?

Yes, Set iterates in insertion order, so the first occurrence of each value is kept, and the order of those first occurrences matches the original array order.

How do I remove duplicates case-insensitively?

You can map strings to lowercase before creating the Set, then map back to the original case if needed. For example: const unique = [...new Set(arr.map(s => s.toLowerCase()))].

Can I use Set with TypeScript’s readonly arrays?

Yes, you can pass a readonly array to Set, and the result will be a mutable array. For example: const unique = [...new Set(readonlyArr)].

Related

• Upgrade from RHEL 6 to RHEL 8: Steps & Risks
• Run n8n & Node.js API in One Docker Compose Stack
• Create Custom Extensions in Safari: A How-To Guide