3 Ways to Remove Duplicates from an array in Javascript
Are you a web developer? Are you a programmer? Then you would be familiar with JavaScript & its different in-built functions, methods, etc for different implementations, problems & purposes.
One of those widely asked problems in interviews in any programming language (we will talk about JavaScript here) is finding unique elements in an array or removing duplicates from an array.
So, this article will teach you three simple methods to execute it from scratch. Here we go:
Before we start, just a suggestion, use Visual Studio Code as it is the best editor for everything, specifically for web development-related stuff. Let’s look over setup-related stuff that one should do. So, if you run any JavaScript program in it or if you are a beginner in it, you should do the following things to make things smooth:
1. Install this extension in Visual Studio Code.
2. To run your program, just “Open New Terminal” and then write node <filename>. Make sure you have installed node.js on your system.
3. For more reference, you can visit here.
Now, coming back to the point that those three simple ways to solve the widely asked question of removing duplicates in array in JavaScript are as follows:
First of all, we would declare an array with duplicate elements namely animals and an array with all unique elements namely unique in all methods we will discuss.
1. Using Sets :
The Set object stores unique values of any type, whether primitive values or object references.
Here, to remove duplicates, we convert animal array to a Set. The new Set will implicitly remove duplicate elements. Then we will convert this set back to unique array.
You might be wondering what these … or three dots or technically spread syntax are in JavaScript. Well, it takes in an iterable entity like arrays or lists, etc, and expands it into individual elements.
// Using Sets let animals = ["Lion", "Rabbit", "Mouse", "Monkey", "Lion","Ape"]
let unique = [...new Set(animals)]
console.log(unique)
Output: ['Lion', 'Rabbit', 'Mouse', 'Monkey', 'Ape']
2. Using Filter:
To under this method, let’s understand what & why of methods that have been used:
1. indexOf(): This method returns the index of the first occurrence of an element in an array. The logic we used that the duplicate item is the item whose its index is different from its indexOf() value, from here what we returned that the element whose current index and indexOf() value is equal.
2. filter(): To remove the duplicates, we use the filter() method to include only elements whose current indexes match their indexOf() values. We stored those values in an array named unique and returned by calling usingFilter() function.
For better understanding, in our example, we have like this:
Format : Current Index -> indexOf()
For value “Lion”, we have: 0 -> 0, 4 -> 0. (Equality doesn’t holds)
For value “Rabbit”, we have: 1 -> 1. (Equality holds, unique element)
For value “Mouse”, we have: 2 -> 2. (Equality holds, unique element)
For value “Monkey”, we have: 3-> 3. (Equality holds, unique element)
For value “Ape”, we have: 5 -> 5. (Equality holds, unique element)
Filtered these unique elements and stored them in unique array and returned them.
// Using Filter Methodlet animals = ["Lion", "Rabbit", "Mouse", "Monkey", "Lion", "Ape"]
let usingFilter = () => {
return unique = animals.filter(function(item,index){return animals.indexOf(item) == index
})
}
console.log(usingFilter())
Output: [‘Lion', 'Rabbit', 'Mouse', 'Monkey', 'Ape']
Fun Fact: If we need to find duplicates in an array using this method, we just have to reverse that equality (==) condition to (!=) and there we go.
3. Using forEach:
Let’s again understand what terminologies we used here:
1. forEach: It is used to iterate each and every element of the animals array.
2. includes(): It returns true if an element is in an array or otherwise.
3.push(): It adds the new items to the end of an array.
The logic behind this method is that we declared a null unique array, then we iterate each & every element of the animals array and then check if unique array includes (or has) that element or not. If not, then if condition becomes true, then we push that element into unique array. So, through this process, we get all the unique elements in unique array and printed them.
// Using forEach Methodlet animals = ["Lion", "Rabbit", "Mouse", "Monkey", "Lion", "Ape"]let unique = [];animals.forEach((item) => {if(!unique.includes(item)){unique.push(item);}});console.log(unique);Output: [‘Lion', 'Rabbit', 'Mouse', 'Monkey', 'Ape']
Hence, we have learned three important, short & easily grasped methods to remove duplicates from an array or find duplicates or unique elements from an array. There are many other methods too to do same stuff but these are easily remembered ones.
You can find the complete source code link here. If you find any more methods, then please drop them down below in the comments.
