4 ways to remove duplicate array javascript

JavaScript , , 2 Comments

In 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?

Spread the love
  • 1
    Share

2
Leave a Reply

avatar
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
Rajnish RajputJohnny Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Johnny
Guest
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