How to Remove Duplicate Elements from an Array in JavaScript

When working with arrays in JavaScript, you might encounter situations where you need to remove duplicate elements. This is a common task, and there are several efficient ways to achieve it. In this article, we'll explore different methods to remove duplicates from an array, ranging from simple techniques to more advanced approaches.

1. Using Set

1 const arrayWithDuplicates = [1, 2, 3, 4, 4, 5, 6, 6, 7, 8, 8];
2 const uniqueArray = [...new Set(arrayWithDuplicates)];
3 
4 console.log(uniqueArray); // Output: [1, 2, 3, 4, 5, 6, 7, 8]

2. Using filter() and indexOf()

1 const arrayWithDuplicates = [1, 2, 3, 4, 4, 5, 6, 6, 7, 8, 8];
2 const uniqueArray = arrayWithDuplicates.filter((item, index) => {
3   return arrayWithDuplicates.indexOf(item) === index;
4 });
5 
6 console.log(uniqueArray); // Output: [1, 2, 3, 4, 5, 6, 7, 8]

3. Using reduce()

1 function removeDuplicates(arr: string[]): string[] {
2   const unique = arr.reduce(function (acc, curr) {
3     curr.trim();
4     if (!acc.includes(curr)) {
5       acc.push(curr);
6     }
7     return acc;
8   }, []);
9   return unique;
10 }

4. Using forEach() and includes()

1 const arrayWithDuplicates = [1, 2, 3, 4, 4, 5, 6, 6, 7, 8, 8];
2 const uniqueArray = [];
3 
4 arrayWithDuplicates.forEach((item) => {
5   if (!uniqueArray.includes(item)) {
6     uniqueArray.push(item);
7   }
8 });
9 
10 console.log(uniqueArray); // Output: [1, 2, 3, 4, 5, 6, 7, 8]

5. Using Map

1 const arrayWithDuplicates = [
2   { id: 1, name: 'One' },
3   { id: 2, name: 'Two' },
4   { id: 1, name: 'Three' },
5   { id: 3, name: 'Four' },
6 ];
7 
8 const uniqueArray = [...new Map(arrayWithDuplicates.map((item) => [item.id, item])).values()];
9 
10 console.log(uniqueArray);
11 // Output: [
12 //   { id: 1, name: 'Alice' },
13 //   { id: 2, name: 'Bob' },
14 //   { id: 3, name: 'Charlie' }
15 // ]