3 ways in JavaScript to remove duplicate items from an array

How to remove duplicate items from an array in JavaScript:

This post will show you how to remove duplicate items from an array in JavaScript. There are different ways to do this in JavaScript. We can use a set or we can traverse through the elements to do that. Let’s learn these ways with examples.

Method 1: By iterating over the array:

We can iterate over the array elements one by one and build one new array holding only the unique values. We will use the forEach method to iterate over the array elements and we can use the includes method to check if an item is in the newly created array or not.

Below is the complete program:

const givenArray = [1, 2, 3, 4, 5, 4, 2, 1, 10];
const newArray = [];

givenArray.forEach((e) => {
  if (!newArray.includes(e)) {
    newArray.push(e);
  }
});

console.log("Given array: ", givenArray);
console.log("New array after duplicates are removed: ", newArray);

Here,

givenArray is an array of numbers. newArray is an empty array to hold the unique items.
With the forEach loop, it is iterating over the elements one by one.
- For each element, it checks if it is added to the array newArray or not. The includes method returns one boolean value. It returns true if the item is added to the array. Else it returns false.
- If the item is not added to the array, it is added with the push method. This method appends an element to the end of an array.
The last two lines are printing the original array and the newly created array after duplicate items are removed.

If you run the above program, it will print the below output:

Given array:  [
  1, 2, 3,  4, 5,
  4, 2, 1, 10
]
New array after duplicates are removed:  [ 1, 2, 3, 4, 5, 10 ]

We can also use a separate function to remove the duplicates:

function removeDuplicates(arr) {
  const newArray = [];

  arr.forEach((e) => {
    if (!newArray.includes(e)) {
      newArray.push(e);
    }
  });

  return newArray;
}

const givenArray = [1, 2, 3, 4, 5, 4, 2, 1, 10];
const uniqueArray = removeDuplicates(givenArray);

console.log("Given array: ", givenArray);
console.log("New array after duplicates are removed: ", uniqueArray);

It will print the same output.

Method 2: By using filter:

The filter method is used to create a shallow copy of a portion of an array based on a given condition. We can pass a callback function and if it returns true, that value is kept. Else, it is not included to the copy. For example:

const givenArray = [1, 2, 3, 4, 5, 6, 7];
const newArray = givenArray.filter((e) => e % 2 === 0);

console.log(newArray);

In this program, the filter method creates a shallow copy of all the even numbers of givenArray. It will print the below output:

[ 2, 4, 6 ]

We can use the indexOf method along with filter to remove all duplicate items. The indexOf method returns the index of the first occurrence of an item in an array. We can change the filter method to accept only those elements for which the current index is equal to the index value returned by the indexOf method. So, it will pick only the first occurrence of each elements. If an element has multiple occurrences, it will exclude all other occurrences.

Below is the complete program:

const givenArray = [1, 2, 3, 4, 5, 6, 7, 2, 5, 6, 10, 1];
const newArray = givenArray.filter((e, i) => givenArray.indexOf(e) === i);

console.log("Given Array: ", givenArray);
console.log("New array: ", newArray);

Here, givenArray is the given array. We are using filter to create a new array by removing all duplicate elements. The last two lines are printing the original array and the new array.

It will print the below output:

Given Array:  [
   1, 2, 3, 4, 5,
   6, 7, 2, 5, 6,
  10, 1
]
New array:  [
  1, 2, 3,  4,
  5, 6, 7, 10
]

Method 3: By converting the array to set:

We can convert the array to a set. A set is a collection of unique items. It doesn’t include any duplicate items. First of all, we will have to convert the array to a set. It will remove all duplicate elements from the array and create one set holding only unique elements. We will have to change the set to an array.

Below is the complete program:

const givenArray = [1, 2, 3, 4, 5, 6, 7, 2, 5, 6, 10, 1];
const arraySet = new Set(givenArray);
const newArray = Array.from(arraySet.values());

console.log("Given Array: ", givenArray);
console.log("New array: ", newArray);

arraySet is the set created from the array.
We are using Array.from to create a new array with the values of the Set. It will create an array holding only unique items.

It will print the below output:

Given Array:  [
   1, 2, 3, 4, 5,
   6, 7, 2, 5, 6,
  10, 1
]
New array:  [
  1, 2, 3,  4,
  5, 6, 7, 10
]

We can also use the set constructor with the spread operator to get the same result.

const givenArray = [1, 2, 3, 4, 5, 6, 7, 2, 5, 6, 10, 1];
const newArray = [...new Set(givenArray)];

console.log("Given Array: ", givenArray);
console.log("New array: ", newArray);

It will print the same result.

CodeVsColor

3 ways in JavaScript to remove duplicate items from an array

How to remove duplicate items from an array in JavaScript:

Method 1: By iterating over the array:

Method 2: By using filter:

Method 3: By converting the array to set:

You might also like: