How to Remove Duplicates from Array in JavaScript Easily

To remove duplicates from an array in JavaScript, you can use new Set(array) which stores only unique values, then convert it back to an array with Array.from() or spread syntax. Another way is to use array.filter() with indexOf to keep only the first occurrence of each item.

Syntax

Here are two common ways to remove duplicates from an array:

• Using Set: Array.from(new Set(array)) or [...new Set(array)]
• Using filter: array.filter((item, index) => array.indexOf(item) === index)

Explanation:

• Set automatically stores unique values only.
• Array.from() or spread [... ] converts the Set back to an array.
• filter keeps items where their first index matches the current index, removing later duplicates.

javascript

const uniqueArray1 = Array.from(new Set(array));
const uniqueArray2 = [...new Set(array)];
const uniqueArray3 = array.filter((item, index) => array.indexOf(item) === index);

Example

This example shows how to remove duplicates from an array of numbers using both the Set and filter methods.

javascript

const numbers = [1, 2, 3, 2, 4, 1, 5];

// Using Set
const uniqueWithSet = [...new Set(numbers)];
console.log('Unique with Set:', uniqueWithSet);

// Using filter
const uniqueWithFilter = numbers.filter((item, index) => numbers.indexOf(item) === index);
console.log('Unique with filter:', uniqueWithFilter);

Output

Unique with Set: [1, 2, 3, 4, 5]
Unique with filter: [1, 2, 3, 4, 5]

Common Pitfalls

Some common mistakes when removing duplicates include:

• Using indexOf inside filter without checking the current index, which can keep duplicates.
• Trying to remove duplicates from arrays of objects without a proper comparison, since Set and indexOf check by reference, not content.
• Mutating the original array instead of creating a new one, which can cause bugs.

javascript

const arr = [1, 2, 2, 3];

// Wrong: filter without index check keeps duplicates
const wrong = arr.filter(item => arr.indexOf(item)); // Incorrect

// Right: filter with index check
const right = arr.filter((item, index) => arr.indexOf(item) === index);

console.log('Wrong:', wrong); // [2, 2, 3]
console.log('Right:', right); // [1, 2, 3]

Output

Wrong: [2, 2, 3]
Right: [1, 2, 3]

Quick Reference

Summary tips for removing duplicates:

• Use new Set() for simple arrays of primitive values.
• Use filter with indexOf for more control.
• For arrays of objects, consider using a key or JSON string to identify duplicates.
• Always create a new array to avoid changing the original.

Key Takeaways

Use new Set(array) to quickly remove duplicates from arrays of simple values.

Convert the Set back to an array with Array.from() or spread syntax [... ].

Use array.filter((item, index) => array.indexOf(item) === index) to remove duplicates while keeping order.

Avoid mutating the original array; always create a new one for unique values.

Removing duplicates from arrays of objects requires custom logic beyond Set or indexOf.