In this tutorial, you will learn to remove duplicate values from array in Javascript.
In Javascript, there are several methods for removing duplicate values from an array, one of which is to use the set data structure. Only unique elements or values will be present in a set if all the values from an array are stored in it.
Let’s take a look at all of the methods available in Javascript for extracting unique values from an array.
1. Using Naive Approach (For Loop) – To Remove Duplicate Values From Array
The first method is the Naive method, which can be used to obtain unique values from an array. Because JavaScript function calls are very expensive, using the for loop actually makes this method much faster and less expensive than the other methods discussed in this tutorial.
Let us see in the below example code the usage of For loop to remove duplicate values from an array in Javascript.
//Function to get the Unique Values
function getUniqueNaive(inputArray) {
var visitedVal = {};
var uniqueVal = [];
var len = inputArray.length;
var j = 0;
for(var i = 0; i < len; i++) {
var curVal = inputArray[i];
if(visitedVal[curVal] !== 1) {
visitedVal[curVal] = 1;
uniqueVal[j++] = curVal;
}
}
return uniqueVal;
}
//Initializing data to remove duplicate elements
var listOfData = [1,2,3,6,1,3,3,7,5,4,7,8,10,8,9,11]
//Printing the UniqueElements
console.log(getUniqueNaive(listOfData))
Output:
[
1, 2, 3, 6, 7,
5, 4, 8, 10, 9,
11
]Explanation:
- As you can see in the above code, I have used the array to store the last seen values.
- If the values are present in the visited array then do not add those values to the output array.
- And if the values are not present in the visited array then add that values to visited array and to the unique value array.
- Once the iteration is completed then return the output array that contains only the unique values.
2. Using Set Data Structure To Get Unique Values from Array
Another approach is to use the set data structure to store the values from an array in order to obtain only unique values. Because Set has the property of only storing unique values, if you try to add a duplicate value to a set, it will ignore it and that value will not be stored.
Let’s look at how to use the Set data Structure in JavaScript to remove duplicate elements from an array in the code below.
//Function to get the Unique Values
function getUniqueNaive(inputArray) {
//Adding all the array element to set and Returing it.
return Array.from(new Set(inputArray))
}
//Initializing data to remove duplicate elements
var listOfData = [1,1,2,2,2,3,4,5,5,5,6,7,8,8,8,8,8,8]
//Printing the UniqueElements
console.log(getUniqueNaive(listOfData))
Output:
[
1, 2, 3, 4,
5, 6, 7, 8
]Explanation:
- As you can see in the above code, I have added all the elements of the array to a set and then I have returned that set from the function.
- And in the output that set contains only unique values and all the duplicate values are ignored and not printed.
3. Using Sorting And Reduce Method To Remove Duplicate Values
In this approach, you can sort the existing array and then use the reduce method to remove the duplicate elements. If you’re going to use function calls to solve this problem, this is also one of the quickest methods.
Let’s look at how the sorting and reduction methods are used to remove duplicate values in the code below.
//Function to get the Unique Values
function getUniqueNaive(inputArray) {
//Using Sort and reduce Method to remove duplicates from the array.
return inputArray.slice().sort(function(item1, item2){return item1 > item2}).reduce(function(item1, item2){if (item1.slice(-1)[0] !== item2) item1.push(item2);return item1;},[]);
}
//Initializing data to remove duplicate elements
var listOfData = [1,1,2,2,2,3,4,5,5,5,6,7,8,8,8,8,8,8]
//Printing the UniqueElements
console.log(getUniqueNaive(listOfData))
Output:
[
1, 2, 3, 4,
5, 6, 7, 8
]Explanation:
- As you can see in the above code, first we are sorting all the elements in the array and then we are comparing each element to next element.
- If the element is greater or lower to next element and is not present in the unique array list then add it else ignore.
- And in last return the list of unique elements of array.
Wrap Up
I hope you were able to learn how to remove the duplicate values from the array in Javascript. I have listed down three methods and you can use any of the above-mentioned methods that work for you as all the efficient methods are discussed here.
Let me know in the comment section if you have any better method than the one discussed above I will be happy to add it here.
If you liked the above tutorial then please follow us on Facebook and Twitter. Let us know the questions and answer you want to cover in this blog.
Further Read:
