4 Ways to Remove Duplicates from an Array in JavaScript

When working with Javascript arrays, there are many cases where your arrays contain duplicate elements. If you want a given array to contain only unique elements, you need to remove the repeated elements. Fortunately, in Javascript, there are some easy and surprisingly effective ways to remove duplicates from that array. The most common techniques are using the Set object, filter() method, for loop, and reduce() method. Each of these approaches has its own advantages and disadvantages and can be used depending on the complexity of the input array and the type of values it contains.

In this article, we will take a look at them in detail, one by one.

Using Set to Remove Duplicates

The Set object is a built-in object in Javascript that allows you to store unique values of any type. It can also be used to remove duplicate values from an array. You can do this by passing the array into the Set constructor the convert the produced set back to an array. The Set object will then iterate over the array and only store the unique values.

Example:

const arr1 = [1, 2, 3, 4, 5, 5, 1, 2, 3, 4];

const set1 = new Set(arr1);
const uniqueArr1 = [...set1];

console.log(uniqueArr1);

You can rewrite the code above in a more concise style like this:

const arr1 = [1, 2, 3, 4, 5, 5, 1, 2, 3, 4];

const uniqueArr1 = [...new Set(arr1)];

console.log(uniqueArr1);

Output:

[1, 2, 3, 4, 5]

This approach is simple and efficient and is great for removing duplicates from an array with simple values such as strings or numbers. If you want to deal with a complex array which contains objects or child arrays, just see the next solution.

Using Filter() Method (Works with Complex Arrays)

The filter() method is another great way to remove duplicate values from an array. It allows you to iterate over an array and filter out elements based on your set conditions.

To use the filter() method to remove duplicates from an array, you need to pass in a function that will check the current element of the array and compare it to the other elements of the array. If the current element is not in the other elements, it will be added to the new array. If the current element is already in the other elements, it will be ignored.

This example demonstrates how to use the filter() method to clear duplicates from an array of objects:

const inputArray = [
  { name: 'John Doe', age: 35 },
  { name: 'Jane Doe', age: 25 },
  { name: 'John Doe', age: 35 },
];

const uniqueArray = inputArray.filter((value, index) => {
  const _value = JSON.stringify(value);
  return (
    index ===
    inputArray.findIndex((obj) => {
      return JSON.stringify(obj) === _value;
    })
  );
});

console.log(uniqueArray);

Output:

[ { name: 'John Doe', age: 35 }, { name: 'Jane Doe', age: 25 } ]

This method is more complicated and longer than the first one, but it works with any array, from simple arrays to complex ones. Let’s try it with a multidimensional array:

const inputArray = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 9, 9],
    [1, 2, 3],
    [4, 5, 6]
];
  
const uniqueArray = inputArray.filter((value, index) => {
    const _value = JSON.stringify(value);
    return (
      index ===
      inputArray.findIndex((obj) => {
        return JSON.stringify(obj) === _value;
      })
    );
});
  
console.log(uniqueArray);

Output:

[ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 9, 9 ] ]

Using for Loop

Another great way to remove duplicates from an array is to use a for loop. The for loop allows you to iterate over an array and compare each element to the other elements of the array.

To use the for loop to remove duplicates from an array, you need to create a new array and loop through the elements of the original array. For each element of the array, you need to check if it is already in the new array. If it is not, you can add it to the new array. Otherwise, you can skip it.

This example creates a reusable named getUniqueArray that uses a for loop to get the job done:

const getUniqueArray = (arr) =>  {
    var result = [];
    for (var i=0, l=arr.length; i<l; i++)
        if (result.indexOf(arr[i]) === -1 && arr[i] !== '')
            result.push(arr[i]);
    return result;
}

console.log(getUniqueArray([1, 2, 3, 3, 2, 2, 2, 1]))
console.log(getUniqueArray(['a', 'b', 'c', 'c', 'b', 'b', 'b', 'a']))

Output:

[ 1, 2, 3 ]
[ 'a', 'b', 'c' ]

This method is great for removing duplicates from a shallow array that bears only primitives. I think this solution a classic style to our problem and it is very flexible.

Using Reduce() Method

The reduce() method executes a reducer function for array element. It returns a single value: the function’s accumulated result. In the following example, the single value we get is the array that contains only unique values.

Example:

const input = ['dog', 'cat', 'dog', 'chicken', 'turtle', 'turtle'];

const unique = input.reduce((a, b) => {
  if (a.indexOf(b) < 0) a.push(b);
  return a;
}, []);

console.log(unique)

Output:

[ 'dog', 'cat', 'chicken', 'turtle' ]

Note that the code above only works with shallow arrays with simple elements like numbers and strings.

Final Thoughts

Removing duplicates from an array in Javascript can be a tedious task, but with the right knowledge and tools, it can be an easy and straightforward process. Through this article, we explored the different ways to achive that goal.

You can also get creative and customize them to your liking if needed. As the old saying goes, all roads lead to Rome. In Javascript, there are often many ways to do the same thing.