4 ways to remove duplicate array javascript
JavaScript 2 CommentsIn this article, we will learn 4 ways with examples of removing duplicate array in JavaScript. and also how to retrieve duplicate values.
Array is a very common concept in any programming language. If you do programming you have to deal it with on a regular basis.
Let’s start with the quick and easy one.
#1 Using Set Object
You can use Set
object to remove duplicate array in JavaScript, Set
is a global object that allows you to store unique values no matter if they are primitive values or object references. source mdn
See the example below, how we can use the set object to remove duplicate array in JavaScript.
Let’s assume we have a duplicate fruits array var fruits = ["banana", "apple", "orange", "watermelon", "apple", "orange", "grape", "apple"];
#1.1 Using Array.from with Set
var fruits = ["banana", "apple", "orange", "watermelon", "apple", "orange", "grape", "apple"]; var uniqueFruits = Array.from(new Set(fruits)); console.log(uniqueFruits); // Output: [“banana”, “apple”, “orange”, “watermelon”, “grape”]
Explanation
Set is an object so it returns a new Set
object with unique values, that’s why I used Array.from
to convert it to an array.
You can use any technique to convert it,
In the below example I’ll show you to do it with spread syntax
#1.2 Using Spread Syntax with Set
Here we are going to remove duplicate array in javascript using spread syntax.
var fruits = ["banana", "apple", "orange", "watermelon", "apple", "orange", "grape", "apple"]; var uniqueFruits = [...new Set(fruits)]; console.log(uniqueFruits); // Output: [“banana”, “apple”, “orange”, “watermelon”, “grape”]
If you want to learn about spread syntax here is the guide.
#2 Using indexOf
indexOf
is a naive but smart way to remove duplicate array in JavaScript. When I did not know about Set
object or have limitations to use the ES5, The first thing came in my mind is indexOf
because personally I like this method and use it widely when playing with arrays.
#2.1 Using function
var fruits = ["banana", "apple", "orange", "watermelon", "apple", "orange", "grape", "apple"]; uniqueFruits = fruits.filter(function(item, pos) { return fruits.indexOf(item) == pos; }) console.log(uniqueFruits); // Output: [“banana”, “apple”, “orange”, “watermelon”, “grape”]
In the above example, I iterate over the fruits
array with using filter
method and checked if the first position fruits.indexOf(item)
of this element in the array is equal to the current position pos
. It is obvious that, these two positions are different for duplicate elements.
#2.2 Using arrow function
Here is the cool and sort way if you can use an arrow function instead of a plain function, In the example below:
var fruits = ["banana", "apple", "orange", "watermelon", "apple", "orange", "grape", "apple"]; uniqueFruits = fruits.filter((item, pos) => fruits.indexOf(item) == pos) console.log(uniqueFruits); // Output: [“banana”, “apple”, “orange”, “watermelon”, “grape”]
Bonus
Retrieving the duplicate values
Also, we can retrieve all the duplicate values using indexOf
with filter
. See the example below:
var fruits = ["banana", "apple", "orange", "watermelon", "apple", "orange", "grape", "apple"]; var duplicates = fruits.filter((item, pos) => fruits.indexOf(item) != pos) console.log(duplicates); // Output: ["apple", "orange", "apple"]
Thanks for reading, share and comment if you liked it. Let me know if I did any mistake in the article and what’s your favorite way?
Johnny
The problem with other examples is that it returns unique values. You might sometimes need the other duplicate values especially when working with data.
Also I don’t think they allow deep copy. For example you have an array within an array, you will instead copy a reference of the inner array
Rajnish Rajput
Yes If you want a deep copy of array or object you have to use
JSON
technique.var arr = [2,3,7,5,3,7,1,3, [1,2,3]];
var deepCopy = JSON.parse(JSON.stringify(arr));
for more see the deep cloning an array