A need to remove the same elements from an array is not such a rare situation. For example, a user filled the form with the same information twice and you need to delete the duplicate. There are many other cases when programmers face such a need. JavaScript offers several ways to remove the duplicates from an array.

The use of Set

Set is a data structure which can store unique values only. You need to use a constructor new Set() in order to create this object. Passing an array of elements as an argument to this constructor will allow you to filter that array and remove the duplicates.

For example, let’s create an array of primitive numbers containing the same values and pass it to the Set constructor. The example below shows that only unique numbers are stored in a created object.

array = [1,2,3,4,5,4,3,2,1];
set = new Set(array);
console.log(set); // logs "Set(5) {size: 5, 1, 2, 3, 4, 5}"

As you can see in the output the elements are surrounded by the curly brackets instead of the regular square ones. That’s because you are working with a set not an array. However, you can convert this structure into a regular array again using the built-in Array.from(set) method or a spread operator which is represented by three dots ([…]). Its use is illustrated in the example below.

new_array = [...set];
console.log(new_array); // logs "(5) [1, 2, 3, 4, 5]"

This way of removing duplicates from an array is considered as one of the fastest and the most productive. Plus, it’s very concise. On the other hand the use of Set is suitable for working with primitive data structures only. It’s not capable of dealing with an array of objects.

filter() and indexOf() methods

An alternate way of deleting the same elements from an array is the use of the built-in filter() and indexOf() methods. It’s a more complicated but also more flexible way.

The indexOf() method returns the index of the first element matching the argument. For example, if you have the array of numbers [1, 2, 3, 2, 1] and call array.indexOf (2), the result would be index 1. This way, if you go through each item of this array, you can easily identify duplicates with the help of this method.

For example, for the second occurrence of number 2 in this array, the indexOf(array[3]) will still return index 1 instead of 3. Thus, you can say that if the actual index of the element and the result of the indexOf() method are different for the same value, it is a duplicate.

array = [1,2,3,2,1];
console.log(array.indexOf(array[1])); // logs 1
console.log(array.indexOf(array[3])); // logs 1 as well, so this is a duplicate

When you know which element is a duplicate you can remove it with the help of the filter() method. It creates a new array with the items which correspond to the conditional statement passed as a parameter.

In other words if the result of the conditional statements is true, the filter() method will include the current element to the new array, otherwise it will be omitted. The following code illustrates the whole procedure of removing duplicates.

array = [1,2,3,2,1];
new_array = array.filter((element, index) => {
return array.indexOf(element) === index;
})
console.log(new_array); // logs "(3) [1, 2, 3]"

If you change the equality operator to an opposite one (using !==), the new array will contain all duplicates. This way of removing the same values from an array is one of the most common. Its advantage is flexibility, as you can add extra conditions and get more specific results.

However, it’s not very productive and works much slower than the previous way. That’s why it’s not recommended to use it while working with a large amount of data.

forEach() and includes()

The includes() method allows you to check whether the array contains the specified element or not. Thus, one more way to remove duplicates is by using it inside a forEach() loop.

For this purpose you can open the forEach() loop and for every item check if the new array contains this value or not. If there is no such item, you can add it using the built-in push() method. The following code shows how simple it is to get rid of the same elements in the array.

array = [1,2,3,2,1];
new_array = [];
array.forEach(element => {
if (!new_array.includes(element))
new_array.push(element);
})
console.log(new_array); // logs "(3) [1, 2, 3]"

Working with arrays of objects

Unfortunately, none of the ways introduced above are optimal for removing duplicates from an array of objects. It happens because the objects in JavaScript have a reference type which means that even though two objects have the same properties, they will not be considered equal, because they have different references.

One of the ways to compare objects is by converting them into a JSON string. For example, let’s create an array of three objects. All of them will have the same value of the name property but only two of them will be completely equal.

Then you can convert the array of objects into an array of strings using the built-in map() method which allows performing the same action for each element of the array. With the help of the JSON.stringfy method you will convert each object into a string. Having an array of strings you can remove duplicates by one of the methods described earlier. For example, you can use the Setconstructor.

The following code implements this procedure. From the output you can see that the duplicates are removed, but the array consists of strings instead of objects. You can change that by means of the JSON.parse method.

array = [
{name: "John",
age: 25},
{name: "John",
age: 30},
{name: "John",
age: 25}
];

json_array = array.map(JSON.stringify);
set = new Set(json_array);
new_array = Array.from(set);
console.log(new_array); // logs "(2) ['{"name":"John","age":25}', '{"name":"John","age":30}']"