Remove duplicate values from an array in JavaScript
This post will discuss how to remove duplicate values from an array in JavaScript.
There are several ways to remove duplicate values from an array in JavaScript, depending on the type and structure of the array elements. Here are some of the most common methods:
1. Using Set object
We can use Set object to remove duplicate values from an array by passing the array to the Set constructor and then use the spread operator (…) to get the array back. This works since a Set is a collections of unique values. For example, if we have an array and we want to remove the duplicates, we can do:
|
1 2 3 4 5 6 |
let arr = [4, 5, 3, 1, 4, 2, 5]; // create a new array with only unique values let newArr = [...new Set(arr)]; console.log(newArr); // [4, 5, 3, 1, 2] |
This method is simple and concise, but it may not work for arrays that contain complex objects or nested arrays. It also does not preserve the original order of the array elements.
2. Using filter() function
The filter() function allows us to create a new array with all elements that pass a condition implemented by the callback function. We can use it to remove duplicate values from an array by returning true for only the first occurrence of each element. We can use the indexOf() function to find the first index of each element in the array and compare it with the current index. For example, if we have an array and we want to remove the duplicates, we can do:
|
1 2 3 4 5 6 7 8 |
let arr = [4, 5, 3, 1, 4, 2, 5]; let newArr = arr.filter(function(item, index) { // return true for only the first occurrence of each element return arr.indexOf(item) === index; }); console.log(newArr); // [4, 5, 3, 1, 2] |
This method preserves the original order of the array elements, but it is not very efficient for large arrays, as it requires a linear search for each element. It also does not work for objects or arrays with nested elements.
3. Using splice() function
We can use the splice() function to remove duplicate values from an array by iterating over the array from the end to the beginning and removing any element that has already been seen before. This function changes the contents of an array by removing existing elements and/or adding new elements. We can use a helper object to keep track of the seen elements. For example, we can use something like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
let arr = [4, 5, 3, 1, 4, 2, 5]; // create a helper object let seen = {}; // iterate over the array from the end to the beginning for (let i = arr.length - 1; i >= 0; i--) { // check if the element has already been seen before if (seen[arr[i]]) { // remove one element at the current index arr.splice(i, 1); } else { // mark the element as seen seen[arr[i]] = true; } } console.log(arr); // [3, 1, 4, 2, 5] |
This is a more efficient and reliable way to remove duplicate values from an array in JavaScript. However, it preserves the original order of the array elements from the end of the array. Also, it does not work not for objects or arrays with nested elements.
4. Using reduce() function
The reduce() function is used to reduce the elements of the array and combine them into a final array based on some reducer function that we pass. The reducer function takes two arguments: an accumulator and a current value. The accumulator is the final array that we want to return, and the current value is the element that we are iterating over. To remove duplicates, we can use the includes() function to check if the accumulator already contains the current value. If not, we can push it into the accumulator. For example:
|
1 2 3 4 5 6 7 8 9 10 |
let arr = [4, 5, 3, 1, 4, 2, 5]; let newArr = arr.reduce (function (acc, curr) { if (!acc.includes (curr)) { acc.push (curr); } return acc; }, []); console.log(newArr); // [4, 5, 3, 1, 2] |
This method preserves the original order of the array elements, but it can cause performance issues with large arrays. It only works for primitive values, but not for objects or arrays with nested elements.
5. Using Frequency Map
This method uses an object or a map to store the array elements as keys and their frequencies as values. Then, it constructs a new array from the map keys. For example:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
let arr = [4, 5, 3, 1, 4, 2, 5]; // Store the frequencies of each element in freqMap let freqMap = new Map(); arr.forEach(item => freqMap.set(item, (freqMap.get(item) || 0) + 1)); // Map(5) { 4 => 2, 5 => 2, 3 => 1, 1 => 1, 2 => 1 } console.log(freqMap); // get all the unique elements let newArr = [...freqMap.keys()]; console.log(newArr); // [4, 5, 3, 1, 2] |
This method is more efficient than the previous ones, as it only requires one iteration over the array. However, it has some drawbacks: it does not preserve the original order of the array elements; it may not work for arrays that contain non-primitive values such as objects or nested arrays.
6. Using a hash table
This method iterates over the array elements and stores them in a hash table as keys. The hash table ensures that only unique keys are stored. Then, the keys of the hash table are converted to an array using the Object.keys() function. For example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
let arr = [ {block: "A"}, {block: "B"}, {block: "C"}, {block: "D"}, {block: "C"}, {block: "B"}, {block: "D"}, {block: "E"} ]; let hash = {}; for (let item of arr) { hash[JSON.stringify(item)] = item; } let newArr = Object.keys(hash).map(key => JSON.parse(key)); // [{block: "A"}, {block: "B"}, {block: "C"}, {block: "D"}, {block: "E"}] console.log(newArr); |
This method works for both primitive values and JSON compatible object arrays. It also preserves the original order of the array elements.
That’s all about removing duplicate values from an array in JavaScript.
Thanks for reading.
To share your code in the comments, please use our online compiler that supports C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.
Like us? Refer us to your friends and support our growth. Happy coding :)