How to Remove Duplicate Items From an Array in JavaScript

Remove Duplicate Items From an Array in JavaScript

Duplicate values in arrays are a common headache in JavaScript programming. Whether you're cleaning up form inputs, merging datasets, or simply tidying up a list of items like fruits or numbers, learning how to remove duplicates effectively will save you time and make your data more reliable.

In this tutorial, you'll explore multiple ways to eliminate duplicates from an array—each with its own charm. From the sleek Set to the powerful filter() method, we've covered practical techniques that are easy to understand, even if you're just starting out.

Method 1: Using Set (ES6)

This is the most modern and elegant way to remove duplicates. A Set is a built-in JavaScript object that only allows unique values. Converting an array into a Set and then back into an array is a clean one-liner trick.

const fruits = ["apple", "banana", "apple", "cherry", "banana"];

const uniqueFruits = Array.from(new Set(fruits));

console.log("Unique fruits:", uniqueFruits);

Unique fruits: [ 'apple', 'banana', 'cherry' ]

Method 2: Using filter() and indexOf()

Before ES6, developers used this technique. It may look more verbose, but it’s still effective and helps you understand how arrays work internally.

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

const uniqueNumbers = numbers.filter((num, index) => {
  return numbers.indexOf(num) === index;
});

console.log("Unique numbers:", uniqueNumbers);

Unique numbers: [ 1, 2, 3, 4, 5 ]

Method 3: Using reduce()

reduce() gives you full control over how you accumulate values. It's a bit more advanced, but very rewarding once you get the hang of it.

const items = ["Item 1", "Item 2", "Item 1", "Item 3", "Item 2"];

const uniqueItems = items.reduce((acc, item) => {
  if (!acc.includes(item)) {
    acc.push(item);
  }
  return acc;
}, []);

console.log("Unique items:", uniqueItems);

Unique items: [ 'Item 1', 'Item 2', 'Item 3' ]

When Should You Use Each Method?

Each of the methods we've explored is valuable depending on your needs:

• Set: Best for quick one-liners. Simple, fast, and readable.
• filter() + indexOf(): Great when you want more control or backward compatibility.
• reduce(): Perfect for more complex filtering logic or functional programming styles.

Bonus Tip: Removing Duplicates in Arrays of Objects

When working with objects, things get a little trickier. Let’s say you have an array of users and want to remove duplicates based on a specific property like id.

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

const uniqueUsers = users.reduce((acc, user) => {
  if (!acc.find(u => u.id === user.id)) {
    acc.push(user);
  }
  return acc;
}, []);

console.log("Unique users:", uniqueUsers);

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

Final Thoughts

Removing duplicates from arrays in JavaScript isn’t just a neat trick—it’s essential for data cleanliness and reliability. From user input validation to backend data processing, duplicates can cause bugs, inconsistencies, and confusion. Thankfully, JavaScript offers multiple tools to solve this problem, whether you’re a beginner writing your first script or a seasoned developer cleaning up complex datasets.

Try each method out for yourself. Notice how they behave, especially when the data structures get more complex. Knowing which approach to use, and when, will make you a stronger, more confident developer.