How to Prevent Duplicates in Array in JavaScript

To prevent duplicates in Array in JavaScript, use either filter() method or Set. The Set is a built-in JavaScript Object that must be unique, and the value equality will be checked.

We often come across an array containing duplicate values in some. However, for job interviews, this is the most common question to be asked in the coding challenge, so you have to be prepared before going for the JavaScript-based Job interviews. 

Here we will discuss some methods to filter out the duplicate values from the JavaScript array and get only the unique values from it.

Prevent duplicates in Array using Set

To prevent or remove duplicates from an array in JavaScript, convert that Array into a Set. The Set only contains unique values. So, after converting into Set, it will remove the duplicates and then convert them back into an array. Set objects are collections of values. Therefore, you can iterate through the items of a set in insertion order.

let arr = ["Rohit", "Shubham", "Rahul", "Jeetu Bhaiya", "Shubham", "Rohit"]

function removeDuplicates(array) {
 return [...new Set(array)];
}
console.log(removeDuplicates(arr));

Output

[ 'Rohit', 'Shubham', 'Rahul', 'Jeetu Bhaiya' ]

Explanation

In this example, we create an array “arr”, which contains people’s names with some duplicates. Then we have created a function “removeDuplicates()”, which takes an array and returns a unique array that doesn’t have any duplicate values. Then we print the returned array with the help of the console.log() function.

Prevent duplicates in Array using filter()

The filter() is a built-in JavaScript method that creates a new array with a condition we provided. If any element fails to fulfill the condition, it will not be allowed to be in the new array.

Using the filter() function, we will create a function that will remove the duplicate values from the array and return a new array filled with unique values.

let arr = ["Rohit", "Shubham", "Rahul", "Jeetu Bhaiya", "Shubham", "Rohit"]

function removeDuplicates(array) {
 return array.filter((value, index) => array.indexOf(value) === index);
}
console.log(removeDuplicates(arr));

Output

[ 'Rohit', 'Shubham', 'Rahul', 'Jeetu Bhaiya' ]

Explanation

In this example, we used a filter() method to filter the duplicates in the given array. First, we create a function, and inside that function, we create a condition inside the filter() method. After filtering an array, it will return the unique array that we are printing using the console.log() function.

Remove duplicates in Array using includes() and forEach() methods

The forEach() is a built-in JavaScript method that calls a function for each element in an array. The forEach() method is not executed for empty elements. With the help of the forEach() method, we can iterate through the elements in the array, and then we will push the elements in the newly created array if it does not exist in a new array.

let arr = ["Rohit", "Shubham", "Rahul", "Jeetu Bhaiya", "Shubham", "Rohit"]

function removeDuplicates(array) {
    let uniqueArray = [];
    array.forEach(element => {
    if (!uniqueArray.includes(element)) {
       uniqueArray.push(element);
    }
  });
  return uniqueArray;
}

console.log(removeDuplicates(arr));

Output

[ 'Rohit', 'Shubham', 'Rahul', 'Jeetu Bhaiya' ]

Explanation

In this example, we are using the forEach() method to iterate over the array and add them to a newly created array one by one. We added the functionality here that if the new array has some value already, we are not pushing that value again. So this way, we will be able to remove duplicates from an array.

That’s it for this tutorial.

See also

How to Convert an Array to Map

How to Map Array Elements in JavaScript

How to flatten Array of Objects in JavaScript

How to Read an Array of Objects in JavaScript

How to Combine Arrays in JavaScript

Leave a Comment