Simplify Your Arrays: Remove Duplicates In JavaScript

remove duplicates from array in javascript

Table of Contents

Dealing with arrays is a common task in JavaScript programming, but developers often encounter difficulties when it comes to efficiently remove duplicates from these arrays. This article explores a range of techniques that can be employed to achieve this goal, ultimately enhancing the cleanliness and manageability of our code.

1. Remove Duplicates Using Set

The Set object in JavaScript is a collection of unique values, which makes it perfect for removing duplicates from an array:

Copy Code

const array = [1, 2, 2, 3, 4, 4, 5]; 
const uniqueArray = [...new Set(array)]; 
console.log(uniqueArray); 

Output: [1, 2, 3, 4, 5]

Using the spread operator (. . .) we can create a set from an array. As in the above example, a set is created and it returns the unique Array from the existing array.

2. Using Filter Method Remove Duplicates

The filter() method creates a new array with elements that pass a provided function’s test. It’s handy for remove duplicates by filtering out elements based on their index:

Copy Code

const array = [11, 15, 12, 11, 4, 4, 15, 6 ];
const uniqueArray = array.filter((value, index) => array.indexOf(value) === index);
console.log(uniqueArray);
 
Output: [ 11, 15, 12, 4, 6 ]

3. Using Reduce Method Remove Duplicates from an Array

The reduce() method executes a function on each element of the array, combining them into a single value. Use an empty array as the starting point for the reduced operation. Iterate through each element of the array by employing the reduce method.

Verify whether the current element exists in the accumulator array. If it does not, include it in the accumulator array. Provide the accumulator array after completing the reduce operation. Here’s an example:

Copy Code

const originalArray = [10, 20, 30, 40, 20, 30, 50, 60, 10];
const uniqueArray = originalArray.reduce((accumulator, currentValue) => {
  if (!accumulator.includes(currentValue)) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);
console.log(uniqueArray);

Output: [10, 20, 30, 40, 50, 60]

4. Using indexOf Method

When using the indexOf() method, the initial index at which a given element is found within an array is returned. If the element is not present, -1 is returned instead. To prevent duplicates, you can iterate over the array and add elements to a new array only if they are not already included. Follow these instructions:

Make an empty array to store the unique elements.
Go through each element of the original array using a loop or array method.
Use the indexOf method for each element to check if it already exists in the unique array.
If the element is not present in the unique array (i.e., indexOf returns -1), add it to the unique array.
Once the loop or array method iteration is finished, the unique array will contain only the distinct elements.

Copy Code

const array = [1, 2, 2, 3, 4, 4, 5]; 
const uniqueArr = []; 
for (const item of array) { 
   if (uniqueArr.indexOf(item) === -1) { 
      uniqueArr.push(item); 
   } 
} 
console.log(uniqueArr); 

Output: [1, 2, 3, 4, 5]

5. Using Map and Filter

When working with JavaScript, the map function is typically used to transform elements in an array rather than remove duplicates. Nonetheless, it can be combined with other techniques to achieve the desired outcome. To eliminate duplicate elements from an array, make use of the map method along with the filter method. The map method allows for the creation of a new array with distinct elements, while the filter method assists in identifying and removing any duplicate elements.

Copy Code

const originalArr = [31, 32, 33, 34, 32, 33, 35, 36, 31];
const uniqueArray = originalArr.map((element, index, array) => {
  return array.indexOf(element) === index ? element : null;
}).filter(element => element !== null);
console.log(uniqueArray);

Output: [31, 32, 33, 34, 35, 36]

6. Using Includes to Remove Duplicates

To remove duplicate array elements using the includes method in JavaScript, you can follow these steps:

DevelopIn order to remove duplicate array elements in JavaScript, you can employ the includes method. Just follow these steps: an empty array to hold the distinct elements.
Go through each element of the initial array utilizing a loop or array function.
Utilize the includes method to verify if each element is already present in the distinct array.
If the element is not found in the distinct array, include it in the distinct array.
Once the loop or array function iteration is finished, the distinct array will exclusively contain the unique elements.

Copy Code

const mainArr = [1, 2, 3, 4, 2, 3, 5, 6, 1];
let uniqueArray = [];
for (let i = 0; i < mainArr.length; i++) {
  if (!uniqueArray.includes(mainArr[i])) {
    uniqueArray.push(mainArr[i]);
  }
}
console.log(uniqueArray);

Output: [1, 2, 3, 4, 5, 6]

7. Using Temporary Object

To remove duplicate elements from an array using a temporary object in JavaScript, you can follow these steps: Create an empty object to serve as a temporary storage. Create an empty array to store the unique elements. Iterate over each element of the original array using a loop or array method. For each element, check if it exists as a property in the temporary object.

If the element does not exist as a property, add it to the object and push it to the unique array. After the loop or array method iteration is complete, the unique array will contain only the distinct elements.

Here’s an example implementation using a loop:

Copy Code

let originalArray = [1, 2, 3, 4, 2, 3, 5, 6, 1];
const tempObject = {};
const uniqueArray = [];
for (let i = 0; i < originalArray.length; i++) {
  const element = originalArray[i];
  if (!tempObject[element]) {
    tempObject[element] = true;
    uniqueArray.push(element);
  }
}
console.log(uniqueArray);

Output: [1, 2, 3, 4, 5, 6]

In this example, we create an empty object tempObject to serve as temporary storage. We also create an empty array uniqueArray to store the unique elements.

We iterate over each element of the original array using a for loop. For each element, we check if it exists as a property in the tempObject using tempObject[element]. If it does not exist, we add the element as a property in the tempObject and push it to the unique array.

This ensures that only the first occurrence of each element is added to the unique array. Finally, we log the unique array, which will contain only the distinct elements.

Using a temporary object to store unique elements allows for efficient removal of duplicates in linear time complexity (O(n)).

8. Conclusion

With these techniques at your disposal, removing duplicate elements from arrays in JavaScript becomes a breeze. Choose the method that best suits your coding style and requirements, and enjoy cleaner and more efficient code!