Remove Duplicates from Array in JS

Duplicates in arrays are common. They can cause bugs in your code. Removing them is a key skill. This article shows you clean, fast ways to do it.

We will use simple methods. You will see code and output. By the end, you can choose the best method for your project.

Why Remove Duplicates?

Duplicate values can break logic. For example, in a list of user IDs, duplicates mean wrong counts. In search results, duplicates annoy users. Cleaning arrays makes data reliable.

Removing duplicates also improves performance. Smaller arrays mean faster loops. It is a basic optimization every developer needs.

Method 1: Using Set (Easiest)

The Set object stores unique values. It is the simplest way to remove duplicates. Convert your array to a Set, then back to an array.

// Example array with duplicates
const numbers = [1, 2, 2, 3, 4, 4, 5];

// Remove duplicates using Set
const uniqueNumbers = [...new Set(numbers)];

console.log(uniqueNumbers);

[1, 2, 3, 4, 5]

This works for numbers and strings. It is fast and readable. Use it for most cases. For objects, Set checks reference, not value. So it works differently with objects.

Method 2: Using filter() and indexOf()

The filter() method creates a new array. It checks if the current item is the first occurrence. Use indexOf() to find the first index.

const fruits = ['apple', 'banana', 'apple', 'orange', 'banana'];

// Keep only first occurrence
const uniqueFruits = fruits.filter((item, index) => {
  return fruits.indexOf(item) === index;
});

console.log(uniqueFruits);

['apple', 'banana', 'orange']

This method is clear. It works with any primitive type. However, it is slower for large arrays. Each indexOf loops through the array. For big data, use Set instead.

Method 3: Using reduce()

The reduce() method builds a result array. It checks if the current item is already in the accumulator. This is more flexible.

const ids = [101, 102, 101, 103, 102, 104];

// Use reduce to build unique list
const uniqueIds = ids.reduce((acc, current) => {
  if (!acc.includes(current)) {
    acc.push(current);
  }
  return acc;
}, []);

console.log(uniqueIds);

[101, 102, 103, 104]

This method is good when you need extra logic. For example, you can transform items as you go. But it is slower than Set.

Method 4: Using forEach() and a Lookup Object

For maximum control, use a loop. Create an object to track seen values. This is very fast for large arrays.

const data = ['a', 'b', 'a', 'c', 'b', 'd'];

const seen = {};
const uniqueData = [];

data.forEach(item => {
  if (!seen[item]) {
    seen[item] = true;
    uniqueData.push(item);
  }
});

console.log(uniqueData);

['a', 'b', 'c', 'd']

This works fast for strings and numbers. The object lookup is O(1). It is good for huge arrays. But it only works with primitive keys.

Method 5: For Objects – Using Map

If you have arrays of objects, use Map. It stores unique keys. You choose a property to compare.

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, name: 'Alice' }, // duplicate
  { id: 3, name: 'Charlie' }
];

// Remove duplicates by 'id'
const uniqueUsers = Array.from(
  new Map(users.map(user => [user.id, user])).values()
);

console.log(uniqueUsers);

[
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
]

This method is powerful. You can pick any property as the key. It keeps the last occurrence. If you want the first, reverse the array first.

Performance Comparison

For small arrays (under 1000 items), any method works. For large arrays, use Set or the object lookup. Set is the fastest in most browsers. The filter method is slowest for big data.

Always test with your actual data. Browser engines optimize differently. But Set is a safe default.

Common Mistakes

Do not modify the original array in place. Always create a new one. This keeps your code predictable. Also, remember that Set treats NaN as equal, but indexOf does not. Check your data types.

If you need to keep the first duplicate, use filter or reduce. Set keeps the first occurrence anyway. So it works fine.

Real-World Example

Imagine you have a list of tags from a blog. Some tags repeat. You want a clean list for a tag cloud.

const tags = ['javascript', 'css', 'html', 'javascript', 'react', 'css'];

// Clean the list
const uniqueTags = [...new Set(tags)];

console.log('Unique tags:', uniqueTags);

Unique tags: ['javascript', 'css', 'html', 'react']

Now you can count or display them without duplicates. This is a common task in web development.

For more on working with arrays, see our JavaScript Array Methods Guide. It covers all the methods used here.

Conclusion

Removing duplicates from an array is easy in JavaScript. Use Set for simplicity and speed. Use filter for readability. Use reduce for custom logic. Use Map for objects.

Always choose the right tool for your data. Test with your array size. Write clean, readable code. Your future self will thank you.

Practice these methods. They will become second nature. Happy coding!

If you need a refresher on array basics, check our JavaScript Array Variables Guide.