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:
- Filtering array in JavasScript
- Iterating over a JavaScript Object
- Convert srt to text with regex in JavaScript
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.
