Duplicate elements can be a nuisance when working with arrays in JavaScript. They not only clutter your data but can also affect the performance of your code. Fortunately, JavaScript offers several efficient methods to remove duplicates from arrays, each with its own advantages and use cases. In this article, we'll delve into six distinct approaches to remove duplicates from arrays, ranging from utilizing built-in methods like Set to more custom solutions for arrays of objects.
1-Using a Set
JavaScript Sets are collections of unique values, making them a natural choice for removing duplicates from arrays. By converting an array to a Set, all duplicate values are automatically discarded.
const arrayWithDuplicates = [1, 2, 3, 4, 4, 5, 6, 6];
const uniqueArray = [...new Set(arrayWithDuplicates)];
console.log(uniqueArray); // Output: [1, 2, 3, 4, 5, 6]
2-Using indexOf() and filter() methods
The combination of indexOf() and filter() methods offers a straightforward approach to removing duplicates by filtering out elements based on their first occurrence in the array.
const arrayWithDuplicates = [1, 2, 3, 4, 4, 5, 6, 6];
const uniqueArray = arrayWithDuplicates.filter(
(value, index, array) => array.indexOf(value) === index
);
console.log(uniqueArray); // Output: [1, 2, 3, 4, 5, 6]
3-Using Reduce
The reduce method allows for concise code to remove duplicates while preserving the order of elements in the original array.
const arrayWithDuplicates = [1, 2, 3, 4, 4, 5, 6, 6];
const uniqueArray = arrayWithDuplicates.reduce(
(accumulator, currentValue) => {
if (!accumulator.includes(currentValue)) {
accumulator.push(currentValue);
}
return accumulator;
}, []);
console.log(uniqueArray); // Output: [1, 2, 3, 4, 5, 6]
4-Using forEach() and include()
Using forEach() along with includes() method, you can efficiently iterate over the array and check if an element is already present in the result array, thus removing duplicates.
const arrayWithDuplicates = [1, 2, 3, 4, 4, 5, 6, 6];
const uniqueArray = [];
arrayWithDuplicates.forEach((value) => {
if (!uniqueArray.includes(value)) {
uniqueArray.push(value);
}
});
console.log(uniqueArray); // Output: [1, 2, 3, 4, 5, 6]
5-Remove duplicates from an array of objects by one property
When dealing with arrays of objects, you might want to remove duplicates based on a specific property. Here's how you can achieve that using the filter() method and a temporary object to track unique values.
const arrayOfObjectsWithDuplicates = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 1, name: 'John' }
];
const uniqueArray = arrayOfObjectsWithDuplicates.filter(
(obj, index, self) =>
index === self.findIndex((t) => t.id === obj.id)
);
console.log(uniqueArray);
// Output: [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' }
]
6-Remove duplicates from an array of objects by multiple properties
In scenarios where you need to consider multiple properties for removing duplicates from arrays of objects, you can create a composite key and utilize a similar approach as above.
const arrayOfObjectsWithDuplicates = [
{ id: 1, name: 'John', age: 30 },
{ id: 2, name: 'Jane', age: 25 },
{ id: 1, name: 'John', age: 30 }
];
const uniqueArray = arrayOfObjectsWithDuplicates.filter(
(obj, index, self) =>
index === self.findIndex(
(t) => t.id === obj.id &&
t.name === obj.name &&
t.age === obj.age
)
);
console.log(uniqueArray);
// Output: [
{ id: 1, name: 'John', age: 30 },
{ id: 2, name: 'Jane', age: 25 }
]
Conclusion
With these diverse techniques at your disposal, you can confidently tackle the task of removing duplicates from arrays in JavaScript. Whether you're working with simple arrays or complex arrays of objects, there's a suitable method to streamline your data and optimize your code's performance. Choose the approach that best fits your requirements and elevate your JavaScript programming skills to the next level.
References:
SOCIAL SHARE CARD GENERATOR