How to Remove Duplicates from an Array in JavaScript#

If you've been writing JavaScript for more than a week, you've hit this problem. You've got an array with repeated values and you need a unique array. Maybe it's a list of user IDs from an API response that returns duplicates. Maybe it's tags pulled from multiple sources. Maybe you're deduplicating search results.

Whatever the reason, figuring out how to remove duplicates from an array in JavaScript is one of those things every developer needs to know and there are way more approaches than you'd expect. Some are elegant. Some are fast. And some are both.

I'm going to walk you through five different methods, explain when each one makes sense, and then show you actual performance numbers so you can pick the right tool for the job. Because yes, it actually matters which one you choose when you're working with thousands (or millions) of elements.

Method 1: Using Set (The Modern Way)#

This is the one you'll see in every "modern JavaScript" tutorial, and honestly, it deserves to be first. Set was introduced in ES6 and it's sort of purpose-built for this exact problem a Set only stores unique values by definition.

javascript
const numbers = [1, 3, 5, 3, 1, 5, 7, 9, 7];// Spread the Set back into an arrayconst unique = [...new Set(numbers)];console.log(unique); // [1, 3, 5, 7, 9]// Also works with stringsconst fruits = ['apple', 'banana', 'apple', 'cherry', 'banana'];const uniqueFruits = [...new Set(fruits)];console.log(uniqueFruits); // ['apple', 'banana', 'cherry']

That's it. One line. You create a new Set from the array (which automatically drops duplicates), then spread it back into an array. You can also use Array.from(new Set(arr)) if you're not a fan of the spread syntax same result.

Here's the thing though: Set uses the SameValueZero↗ algorithm for comparison, which is basically strict equality (===) with one exception it treats NaN as equal to NaN. That means it works great for primitives (numbers, strings, booleans), but it won't deduplicate objects by their contents. Two objects with identical properties are still two different references, and Set will keep both.

javascript
const items = [{ id: 1 }, { id: 1 }, { id: 2 }];const uniqueItems = [...new Set(items)];console.log(uniqueItems.length); // 3  not what you wanted

We'll handle the object case later. But for primitives? Just use Set. Seriously. It's fast, readable, and every JavaScript developer understands it at a glance.

Method 2: filter() + indexOf()#

Before Set existed, this was the classic approach. It's still useful to understand because you'll encounter it in older codebases and it has a certain elegance to it once you see what's happening.

javascript
const numbers = [1, 3, 5, 3, 1, 5, 7, 9, 7];const unique = numbers.filter((value, index) => {  // Only keep the element if it's the FIRST occurrence  return numbers.indexOf(value) === index;});console.log(unique); // [1, 3, 5, 7, 9]

The logic is simple: for each element, indexOf() returns the index of its first occurrence. If that matches the current index, this is the first time we've seen this value, so we keep it. If not, it's a duplicate, and filter() drops it.

I kind of like this approach for teaching purposes it forces you to think about what deduplication actually means. But in production code with large arrays? It's slow. indexOf() is an O(n) scan, and you're calling it for every single element, giving you O(n²) overall. On an array of 100,000 elements, you'll feel that.

Method 3: reduce() to Build a Unique Array#

The reduce() approach is more verbose, but it gives you maximum control over the deduplication logic. That flexibility matters when your requirements aren't a simple "remove exact copies."

javascript
const numbers = [1, 3, 5, 3, 1, 5, 7, 9, 7];const unique = numbers.reduce((accumulator, current) => {  if (!accumulator.includes(current)) {    accumulator.push(current);  }  return accumulator;}, []);console.log(unique); // [1, 3, 5, 7, 9]

Same result, more code. So why would anyone use this?

Because reduce() lets you transform values during deduplication. Say you want to normalize strings to lowercase before comparing, or merge properties from duplicate objects. You can do all of that inside the reducer. The filter + indexOf method and Set don't give you that kind of control without extra steps.

That said I'm going to be honest here reduce() is kind of overused for this. If you're just removing duplicates from a flat array of primitives and you reach for reduce(), you're writing more code than necessary. Use Set. But when the logic gets more complex, reduce() starts to earn its verbosity.

Tip: If you're using reduce() with includes() like the example above, you still have O(n²) performance. For better performance inside a reducer, use a lookup object or a Set as the accumulator instead.

Method 4: Deduplicating Objects by Key#

This is the real-world scenario that trips people up. You've got an array of objects maybe user records, product listings, API responses and you need to remove duplicates based on a specific property like id or email.

Set won't help you here (it compares by reference, not by value). You need to get creative.

javascript
const users = [  { id: 1, name: 'Alice', role: 'admin' },  { id: 2, name: 'Bob', role: 'user' },  { id: 1, name: 'Alice', role: 'admin' },  // duplicate  { id: 3, name: 'Charlie', role: 'user' },  { id: 2, name: 'Bob', role: 'user' },      // duplicate];// Using a Map  preserves insertion order, keeps first occurrenceconst uniqueUsers = [  ...new Map(users.map(user => [user.id, user])).values()];console.log(uniqueUsers);// [//   { id: 1, name: 'Alice', role: 'admin' },//   { id: 2, name: 'Bob', role: 'user' },//   { id: 3, name: 'Charlie', role: 'user' }// ]

This one's clever. Here's what's happening: you map each object to a [key, value] pair, feed those pairs into a Map (which overwrites duplicates by key), then pull the values back out. The Map keeps insertion order, so your first occurrence wins.

A team I worked with had an API that returned paginated results with overlapping entries at page boundaries. This exact pattern saved us from displaying duplicate items in a feed. We just deduped by the item's id after fetching each page, and the duplicates disappeared.

You can also make this into a reusable utility:

javascript
function uniqueBy(array, key) {  return [...new Map(array.map(item => [item[key], item])).values()];}// Usageconst deduped = uniqueBy(users, 'id');

If you're working with JavaScript objects a lot and want to understand how they compare to JSON, our post on JavaScript objects vs JSON gets into the nuances that matter here.

Method 5: Using a Plain Object as a Lookup#

Before Maps were widely supported, developers used plain objects as hash tables. It still works, but there are caveats.

javascript
const tags = ['react', 'vue', 'react', 'angular', 'vue', 'svelte'];const seen = {};const unique = tags.filter(tag => {  if (seen[tag]) return false;  seen[tag] = true;  return true;});console.log(unique); // ['react', 'vue', 'angular', 'svelte']

This is O(n) fast. But using an object as a lookup has a subtle problem: object keys are always strings. So if your array contains numbers and strings that look alike (1 and "1"), they'll collide. The number 1 and the string "1" become the same key.

javascript
const mixed = [1, '1', 2, '2'];// Using object lookup  bug!const seen = {};const unique = mixed.filter(v => {  if (seen[v]) return false;  seen[v] = true;  return true;});console.log(unique); // [1, 2]  lost the strings!

That's why Map or Set is almost always the better choice for modern code. They don't coerce keys.

How to Choose: A Decision Flowchart#

Here's a quick way to think about which method fits your situation:

mermaid
graph TD    A[Need to remove duplicates?] --> B{Primitives or Objects?}    B -->|Primitives| C{Performance critical?}    B -->|Objects| D{Dedupe by specific key?}    C -->|No| E["Use Set ✅"]    C -->|Yes| F["Use Set ✅<br/>Already O(n)"]    D -->|Yes| G["Use Map with key"]    D -->|No| H{Need deep equality?}    H -->|Yes| I["Use reduce() with<br/>custom comparator"]    H -->|No| G

For most everyday cases, you'll end up at Set. And that's fine it's the right answer 90% of the time.

Performance Comparison#

Alright, let's talk numbers. I ran each method against arrays of different sizes on Node.js 22. These are averaged over 100 runs each. Your results will vary depending on environment, but the relative performance holds.

A few things jump out:

Set is blazingly fast. It's O(n) and it shows. On a million items, it finishes in under 50ms. That's more than fast enough for basically any front-end use case.

filter + indexOf and reduce + includes are O(n²). On small arrays (under 1,000 items), you'll never notice. But at 10,000 items, they're already 100x slower than Set. At a million? Don't even bother your browser tab will freeze. I learned this the hard way debugging a sluggish product catalog page that was deduplicating 50k items on every render. Switching from filter+indexOf to Set cut the processing time from 400ms to under 1ms.

Object lookup is technically the fastest for primitives because of how V8 optimizes property access. But the type coercion issue I mentioned earlier makes it unreliable unless you know your data is all the same type. The 7ms difference between it and Set on a million items isn't worth the risk.

Warning: If you're deduplicating arrays inside a React render cycle or a hot loop, the performance difference between O(n) and O(n²) methods can absolutely cause visible jank. Always use Set or Map for arrays larger than a few hundred elements.

Bonus: Deduplicating While Preserving Order#

All of the methods above preserve the order of first occurrence the first time a value appears, that's where it stays in the result. But what if you want to keep the last occurrence instead?

javascript
const items = ['a', 'b', 'a', 'c', 'b'];// Keep LAST occurrence of each valueconst keepLast = [...new Map(items.map((v, i) => [v, i]))].sort(  ([, a], [, b]) => a - b  // restore original relative order).map(([v]) => v);// Wait, this is getting complicated...// Simpler: reverse, dedupe, reverse backconst keepLastSimple = [...new Set([...items].reverse())].reverse();console.log(keepLastSimple); // ['a', 'c', 'b']

The double-reverse trick is one of those things that looks hacky but actually works perfectly. Reverse the array so the last occurrences come first, dedupe with Set (which keeps first occurrences), then reverse again to restore order. Neat.

When You're Converting to TypeScript#

If you're deduplicating arrays in a TypeScript project or thinking about migrating your JS utilities to TS your deduplicate functions can benefit from generics. A typed version of uniqueBy catches bugs at compile time that the JavaScript version would silently let through.

If you want to quickly see how your JavaScript utility functions look in TypeScript, SnipShift's JS to TypeScript converter↗ handles exactly this kind of transformation. Paste your uniqueBy function, and it'll generate proper generic types instead of leaving everything as any.

Speaking of JavaScript fundamentals, if you're brushing up, our guides on deep cloning objects and destructuring cover patterns you'll use alongside deduplication all the time.

Pick the Right Tool#

Here's the short version: use Set for primitives, use Map for objects. That's it. That covers 95% of real-world scenarios where you need to remove duplicates from an array in JavaScript.

The filter+indexOf and reduce approaches are fine for small arrays and interview questions, but they don't scale. And the plain object lookup while fast has the type coercion footgun that'll eventually bite you.

If you're building utility functions like these for your team, consider writing them in TypeScript from the start. The type safety alone prevents an entire class of bugs. And if you've got a library of JavaScript helpers you want to convert, SnipShift↗ can speed that process up significantly.

What's your go-to approach for deduplication? I'm curious whether anyone has edge cases where reduce() actually beats Set. Hit me up I'd love to hear about it.