4 ways to remove duplicate array javascript

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?