Remove duplicate items from a JavaScript array

Removing duplicates from an array keeps data accurate and efficient by reducing redundancy and improving performance. It also makes data easier to read and use in applications.

So, in this tutorial, you’ll learn how to easily remove duplicate values from a JavaScript array using straightforward examples of code.

First of all, I’d like to let you all know that there are several ways to remove duplicates from a JavaScript array and clean up your code. Below are three methods for eliminating repeated data from your JavaScript arrays.

Method 1: Removing Duplicates Using a Set

A `Set` is a built-in JavaScript object that only stores unique values. By converting an array into a `Set`, duplicates are automatically removed since `Set` does not allow repeated values. You can then convert the `Set` back into an array if you need to work with the data in array form.

const fruits = ['apple', 'banana', 'apple', 'orange', 'banana'];
const uniqueFruits = new Set(fruits);
console.log(uniqueFruits); 

You’ve seen how to do this in just two lines of code, with the extra line for logging the result. We simply created a new `Set` object and passed our array as a parameter.

Output :

 Set { 'apple', 'banana', 'orange' }

Method 2: Removing Duplicates Using a Map

A `Map` stores unique keys and values. By mapping each array element to a unique key, duplicates are removed, and you can then retrieve the unique values from the `Map`.Here’s how to use a map for primitive values:

const pets = [
  { id: 1, type: 'dog', name: 'Buddy' },
  { id: 2, type: 'cat', name: 'Whiskers' },
  { id: 3, type: 'dog', name: 'Rex' },
  { id: 1, type: 'dog', name: 'Buddy' },
  { id: 4, type: 'bird', name: 'Tweety' },
];
const mapFromPets = new Map(pets.map(pet => [pet.id, pet]));
const uniquePets = [...mapFromPets.values()];
console.log(uniquePets);

Output :

[
{ id: 1, type: 'dog', name: 'Buddy' },
{ id: 2, type: 'cat', name: 'Whiskers' },
{ id: 3, type: 'dog', name: 'Rex' },
{ id: 4, type: 'bird', name: 'Tweety' }
]

Method 3: Removing Duplicates Using JavaScript Filter () Method

The filter() method creates a new array with elements that meet a specific condition defined by a callback function. It keeps only the elements for which the condition returns true.

Here’s an example of using filter() to remove duplicates from a JavaScript array:

let ages = [21, 34, 21, 45, 34, 28];

function removeDuplicateAges(ages) {
    return ages.filter((age, index) => ages.indexOf(age) === index);
}

console.log(removeDuplicateAges(ages));

Output :

[21, 34, 45, 28]

So far, we’ve covered several methods for removing duplicate values from a JavaScript array. There are other techniques available as well, like using `reduce()` or `forEach()So far, or adding a custom method to the Array prototype. You can also use libraries like Underscore.js, or remove duplicates from arrays of objects based on unique properties, which might require more lines of code and added complexity.