Efficient Techniques to Remove Duplicates from Arrays in JavaScript

Parvez Alam
5 min readJul 1, 2023

--

In this article, we will explore different methods to remove duplicates from an array in JavaScript, ranging from traditional approaches to modern ES6 solutions.

sometimes we come across situations where we need to remove duplicate values from an array in javascript. JavaScript provides us with several techniques to efficiently handle this task.

Here, We’ll discuss different ways to filter out duplicates from an array and return only the unique values.

Checkout Other tutorials:

What are the Duplicates Values of the Array

Array duplicates occur when there are multiple occurrences of the same value within an array. These duplicates can affect various programmatically operations, such as searching, sorting, or performing calculations on the array.

Method 1: Using a Temporary Array

The traditional approach to remove duplicates from an array is by utilizing a temporary array. We iterate over the original array and check if the value is already present in the temporary array. If not, we add it; otherwise, we skip it.

function removeDuplicates(array) { var tempArray = []; for (var i = 0; i < array.length; i++) { if (tempArray.indexOf(array[i]) === -1) { tempArray.push(array[i]); } } return tempArray; } // Example usage var array = [1, 2, 3, 3, 4, 5, 5, 6, 6, 7]; var result = removeDuplicates(array); console.log(result);

Output:

[1, 2, 3, 4, 5, 6, 7]

In the code above, we define a function removeDuplicates() that takes an array as input and returns a new array with duplicates removed. We create a tempArray to store the unique values.

Method 2: Using the Filter Method

The filter() method allows us to create a new array by filtering out elements that meet a specific condition. By using the indexOf() method within the filter() callback function, we can retain only the first occurrence of each value, effectively removing duplicates.

function filterDuplicates(array) { return array.filter((value, index, self) => { return self.indexOf(value) === index; }); } // Example usage var array = [1, 2, 3, 3, 4, 5, 5, 6, 6, 7]; var result = filterDuplicates(array); console.log(result);

Output:

[1, 2, 3, 4, 5, 6, 7]

In the code above, we define a function filterDuplicates() that takes an array as input and uses the filter method to create a new array with duplicates removed.

Method 3: Using the Set Object

ES6 introduced the Set object, which provides a built-in mechanism to store unique values. By converting the array into a Set, we automatically remove duplicates. We can then convert the Set back to an array using the spread operator or the Array.from() method.

function removeDuplicatesUsingSet(array) { return Array.from(new Set(array)); } // Example usage var array = [1, 2, 3, 3, 4, 5, 5, 6, 6, 7]; var result = removeDuplicatesUsingSet(array); console.log(result);

Output:

[1, 2, 3, 4, 5, 6, 7]

in the code above, we define a function removeDuplicatesUsingSet that takes an array as input and uses the Set object to create a new set, which automatically removes duplicates.

Method 4: Using the Reduce Method

The reduce() method is a powerful tool for array manipulation. We can utilize it to iterate over the array and build a new array by excluding duplicate values.

function removeDuplicatesUsingReduce(array) { return array.reduce((uniqueArray, currentValue) => { if (!uniqueArray.includes(currentValue)) { uniqueArray.push(currentValue); } return uniqueArray; }, []); } // Example usage var array = [1, 2, 3, 3, 4, 5, 5, 6, 6, 7]; var result = removeDuplicatesUsingReduce(array); console.log(result);

Output:

[1, 2, 3, 4, 5, 6, 7]

In the code above, we define a function removeDuplicatesUsingReduce that takes an array as input and uses the reduce method to iterate over the array and construct a new array with duplicates removed.

Method 5: Using the Map Object

Similar to the Set object, the Map object allows us to store unique key-value pairs. We can use the Map to track unique values from the array, and then extract them into a new array using the spread operator or the Array.from() method.

function removeDuplicatesFromArray(array) { const uniqueMap = new Map(); return array.filter((value) => !uniqueMap.has(value) && uniqueMap.set(value, true)); } // Example usage var array = [1, 2, 3, 3, 4, 5, 5, 6, 6, 7]; var result = removeDuplicatesFromArray(array); console.log(result);

Output:

[1, 2, 3, 4, 5, 6, 7]

In the code above, we define a function removeDuplicatesFromArray that takes an array as input and uses the Map object to create a unique mapping of elements.

Method 6: Using the IndexOf Method

The indexOf() method returns the index of the first occurrence of a specified value within an array. By iterating over the array and checking if the current index matches the index of the value, we can filter out duplicates.

function deletesDuplicates(array) { var uniqueArray = []; for (var i = 0; i < array.length; i++) { if (uniqueArray.indexOf(array[i]) === -1) { uniqueArray.push(array[i]); } } return uniqueArray; } // Example usage var array = [1, 2, 3, 3, 4, 5, 5, 6, 6, 7]; var result = deletesDuplicates(array); console.log(result);

Output:

[1, 2, 3, 4, 5, 6, 7]

In the code above, we define a function deletesDuplicates that takes an array as input. We create an empty array called uniqueArray to store the elements without duplicates.

Method 7: Using the includes Method

The includes() method checks if an array includes a specific value and returns a boolean. By iterating over the array and adding values to a new array only if they are not already present in the new array, we can effectively remove duplicates.

function removeDuplicatesUsingIncludes(array) { var uniqueArray = []; for (var i = 0; i < array.length; i++) { if (!uniqueArray.includes(array[i])) { uniqueArray.push(array[i]); } } return uniqueArray; } // Example usage var array = [1, 2, 3, 3, 4, 5, 5, 6, 6, 7]; var result = removeDuplicatesUsingIncludes(array); console.log(result);

Output:

[1, 2, 3, 4, 5, 6, 7]

In the code above, we define a function removeDuplicatesUsingIncludes that takes an array as input. We create an empty array called uniqueArray to store the elements without duplicates.

Method 8: Using the Object Keys

This method leverages the fact that object keys are unique. By converting the array elements into object keys and then extracting the keys back into an array, we automatically eliminate duplicates.

The empty array is called uniqueArray to store the elements without duplicates, and an empty object called uniqueObject to keep track of the unique elements.

function removeDuplicates(array) { var uniqueArray = []; var uniqueObject = {}; for (var i = 0; i < array.length; i++) { var element = array[i]; if (!uniqueObject.hasOwnProperty(element)) { uniqueArray.push(element); uniqueObject[element] = true; } } return uniqueArray; } // Example usage var array = [1, 2, 3, 3, 4, 5, 5, 6, 6, 7]; var result = removeDuplicates(array); console.log(result);

Output:

[1, 2, 3, 4, 5, 6, 7]

In the code above, we define a function removeDuplicates that takes an array as input. We create an empty array called uniqueArray to store the elements without duplicates, and an empty object called uniqueObject to keep track of the unique elements.

Conclusion:

Removing duplicates from an array is a common task in JavaScript development. In this article, we explored various techniques to achieve this goal, ranging from traditional approaches to modern ES6 solutions. Depending on the specific requirements and size of the array, developers can choose the most suitable method for their needs. By effectively removing duplicates, we can enhance the performance and reliability of our JavaScript applications.

Originally published at https://www.js-tutorials.com on July 1, 2023.

--

--

Parvez Alam

Hey, I am Parvez Alam. A software developer since 2009. I love learning and sharing knowledge. https://www.phpflow.com/