How to remove duplicate elements in an Array in JavaScript.
Tags: javascript, webdev, tutorial, productivity
Published: 2023-02-23 23:22:40

So I came across this problem where I had an array consisting of multiple elements in the array and some elements were duplicated. After much research and brain-storming, I found 3 ways to remove duplicate elements from an array. 
They are: 
1. using **forEach()** with the **includes()** array methods.
2. using **filter()** with the **indexOf()** methods.
3. using **Set()** method.

Let's get started and get our hands dirty and see how we can do this😊:

## **1.) Using forEach() method with the includes() method**
The **forEach** method iterates over an array and calls a function on each element in the array. It is not executed for empty elements.
The **includes()** method returns `true` if an array contains a specified value. It returns `false` if the value is not found. Therefore, it is case sensitive.
So how do we combine them to do what we want i.e. remove duplicate elements?

> first let's declare an array and put duplicate elements in it.

``` js
let testArray = ["hey", "hello", "hola", "hello", "hey", "hola"]
```

> let's declare another array that would hold the unique values

``` js
let cleanArray = []
```

> let's run our loop

``` js
let testArray = ["hey", "hello", "hola", "hello", "hey", "hola"]

let cleanArray = []

testArray.forEach(element => {
    if(!cleanArray.includes(element)){
        cleanArray.push(element)
    }
})

console.log(cleanArray)
```

> OR

``` js
let testArray = ["hey", "hello", "hola", "hello", "hey", "hola"]

let cleanArray = []

testArray.forEach(element => {
    if(cleanArray.includes(element)){
        return
    }
    cleanArray.push(element)
})

console.log(cleanArray)
```

> Here's our Output

``` js
[ 'hey', 'hello', 'hola' ]
```
Both of them produces the same result. The first one pushes elements into the cleanArray variable only when the **includes()** method evaluates to `false` while in the second, the `return` stops the execution of the element when true and only pushes elements that evaluates to `false`.

## **2.) Using the filter() method with indexOf() method**
The **filter()** method creates a new array filled with elements that pass a test provided by a function. It does not execute the function for empty elements, and it does not change the original array, rather it creates a new array from the original array.
The **indexOf()** method returns the first index (position) of a specified value. It returns -1 if the value is not found. It starts from a specified index and searches from left to right.
So let's see how we can do this:

> we define our testArray, then we use the **filter()** method to get the elements whose indexes match their indexOf values, since **filter()** returns a new array we can capture it in our cleanArray variable.

``` js
let testArray = ["hey", "hello", "hola", "hello", "hey"]

let cleanArray = testArray.filter((element, index) => {
    return testArray.indexOf(element) === index
})

console.log(cleanArray)
```

> Here's our Output

``` js
[ 'hey', 'hello', 'hola' ]
```
> But what if we want to get the duplicate instead?
Just modify our condition to get the elements whose indexes does not match their indexOf values, e.g.
``` js
let testArray = ["hey", "hello", "hola", "hello", "hey"]

let cleanArray = testArray.filter((element, index) => {
    return testArray.indexOf(element) !== index
})

console.log(cleanArray)
```
> And we will get the duplicates as our Output

```js
[ 'hello', 'hey' ]
```

## **3.) Using the JavaScript Set()**
A JavaScript Set is a collection of unique values. Each value can only occur once in a set. Thus, it can hold any value of any data type.
To do this, we need to:
> Define our testArray, and call the **Set()** method on the testArray but oops that results in an Object not an Array😔 as shown below.

``` js
let testArray = ["hey", "hello", "hola", "hello", "hey"]

let cleanArray = new Set(testArray)

console.log(cleanArray) //Set { 'hey', 'hello', 'hola' }
```
> To fix this, we can use two ways which are
   - spread the new Set() in an array

``` js
let testArray = ["hey", "hello", "hola", "hello", "hey"]

let cleanArray = [...new Set(testArray)]

console.log(cleanArray) //[ 'hey', 'hello', 'hola' ]
```
> OR
   - use the Array constructor to generate an array from the Set() method 

``` js
let testArray = ["hey", "hello", "hola", "hello", "hey"]

let cleanArray = Array.from(new Set(testArray))

console.log(cleanArray) //[ 'hey', 'hello', 'hola' ]
```

Feel free to pick any method that works for you and satisfies your needs. Personally, I prefer to use Set because the other two are basically calling a for loop in a for loop which heavily increases how long the algorithms are going to take and using the set() method is slightly faster. 
There may be other ways to do this though😊.

if you like such content follow me on twitter [@Headbwoi](https://twitter.com/Headbwoi_1)
Thank You.