How to remove duplicate elements in an Array in JavaScript.

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.

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

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

let cleanArray = []

let's run our loop

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

let cleanArray = []

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

console.log(cleanArray)

OR

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

[ '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.

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

[ '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.

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

[ '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.

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

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

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
Thank You.