Efficient Ways to Remove Duplicates from an Array in JavaScript
Introduction:
1. Using the Set Data Structure:
Eg: const arrayWithDuplicates = [1, 2, 3, 4, 1, 2, 5];const uniqueArray = Array.from(new Set(arrayWithDuplicates));console.log(uniqueArray); // Output: [1, 2, 3, 4, 5]
The Set data structure only allows unique values, making it a convenient option for removing duplicates. However, it converts the array to a Set and then back to an array, potentially altering the order of elements.
2. Using the filter() Method:
Eg: const arrayWithDuplicates = [1, 2, 3, 4, 1, 2, 5];const uniqueArray = arrayWithDuplicates.filter((value, index) => {return arrayWithDuplicates.indexOf(value) === index;});console.log(uniqueArray); // Output: [1, 2, 3, 4, 5]
This approach retains the order of elements in the original array while removing duplicates. However, it has a higher time complexity since it searches for the index of each element in the array repeatedly.
3. Using the reduce() Method:
The reduce() method applies a function to an accumulator and each element in the array, resulting in a single value. By leveraging reduce(), you can construct a new array that only includes unique elements.
Eg: const arrayWithDuplicates = [1, 2, 3, 4, 1, 2, 5];
const uniqueArray = arrayWithDuplicates.reduce((accumulator, currentValue) => {
if (!accumulator.includes(currentValue)) {
accumulator.push(currentValue);
}
return accumulator;
}, []);
console.log(uniqueArray); // Output: [1, 2, 3, 4, 5]
The reduce() method iterates over the array once, comparing each element to the accumulator array. This approach preserves the order of elements and removes duplicates efficiently.
4. Using ES6 Spread Operator and Set:
ES6 introduces the spread operator, which allows expanding an iterable (like an array) into individual elements. By combining it with the Set data structure, you can remove duplicates concisely.
Eg: const arrayWithDuplicates = [1, 2, 3, 4, 1, 2, 5];
const uniqueArray = [...new Set(arrayWithDuplicates)];
console.log(uniqueArray); // Output: [1, 2, 3, 4, 5]
This method is concise, efficient, and retains the original order of elements. However, it may not work as expected in older browsers that lack ES6 support.
Techniques to remove duplicates from arrays in JavaScript. Methods like using the Set data structure, filter(), reduce(), and the spread operator.
Enjoy!
