How to Remove Duplicates from Array in JavaScript

There are 4 ways to easily remove duplicates from array in JavaScript. Let’s explore the methods.

Methods to Remove Duplicates from Array in JavaScript

Here are the list of 4 methods where we can easily remove duplicates from array in JavaScript. Since each of them have their own properties and features, we can choose which to use depending on our needs.

• Set Object Method
• Array filter() Method
• Array forEach() Method
• Array reduce() Method

Let’s look into each details with illustration below.

1. Set Object Method

Set is a standard built-in object in JavaScript.

Its features includes:

• Initialise with an array
• Duplicate values will be removed when initialise
• Using Spread Operator(...) on Set will get back original ordering

Below shows the example where we initialise the array to the Set, then we use the Spread Operator(...) to expand the Set back to an array. Do notice that only the duplicated value get removes; the first appearance of the element stay in the same order.

const myArray = ['one', 'two', 'two', 'one', 'three'];

const newArray = [...new Set(myArray)];
console.log(newArray);  // ["one", "two", "three"]

2. Array filter() Method

filter() is part of original Array standard built-in object method in JavaScript. We will combine with indexOf() method to perform a scan for the index of first appearance.

This method can be describe as ‘If this is the 1st appearance, take it and ignore the rest’.

Its features includes:

• Allow specifying of test to execute on every element
• Return an array of elements that pass the test
• Does not modify the array

Below shows the example where we define an arrow function firstAppearance that check if this item’s index is the same as its first appearance. Only return to the new array if it is the first appearance.

const myArray = ['one', 'two', 'two', 'one', 'three'];
const firstAppearance = (item, index) => myArray.indexOf(item) === index;

const newArray = myArray.filter(firstAppearance);
console.log(newArray);  //  ["one", "two", "three"]

3. Array forEach() Method

forEach() is part of original Array standard built-in object method in JavaScript. We will execute an includes() in every iteration to check if the current value is already in the new array. If not, we will add to the new array.

Its features includes:

• Loop through any iterable
• Does not return any result but we can process what we need in each iteration
• Does not modify the array

Below shows the example where we will first create a new empty array []. Then we will push the element in if it does not exist yet.

const myArray = ['one', 'two', 'two', 'one', 'three'];
const newArray = [];

myArray.forEach(value => {
  if (!newArray.includes(value)) {
    newArray.push(value);
  }
});

console.log(newArray); // ["one", "two", "three"]

4. Array reduce() Method

reduce() is part of original Array standard built-in object method in JavaScript. We will execute an includes() in every iteration to check if the current value is already in the new array. If not, we will add to the new array.

Its features includes:

• Loop through any iterable
• Does not return any result but we can process what we need in each iteration
• Does not modify the array

Below shows the example where we will first create a new empty array [] and pass into reduce function. Then we will iterate and push only the new values to this array.

const myArray = ['one', 'two', 'two', 'one', 'three'];

const newArray = myArray.reduce((acc, currentValue) => {
  if (!acc.includes(currentValue)) {
    acc.push(currentValue);
  }
  return acc;
}, []);

console.log(newArray); // ["one", "two", "three"]

Conclusion

We have look into 4 different methods to remove duplicates from array.

Set object method would be the simplest of all. Array filter() method is also simple if we manage to understand the concept. If there is a existing array that we need to add into, forEach() will allow us to do that.

I will recommend not to use reduce() method if you don’t fully understand the concept as it can cause confusion during debugging. We have a full guide on how to use reduce() here.