Blog

To prevent adding duplicates to an array in JavaScript, you can use any of these methods –

1. Use the Array.includes() method to check if an element with the same value exists in the array. If not, insert the element in the array.
2. Use the Array.indexOf() method to check if an element with the same value exists in the array. If not, insert the element in the array.
3. Convert the array to a Set and insert the element into this set. Then convert the set back to an array. A Set contains only unique elements, so this method will also avoid duplicates.

Let’s discuss these methods in detail below.

Array.includes() Method To Prevent Adding Duplicates To An Array In JavaScript

This is the most recommended method to avoid duplicates in an array. The Array.includes() method accepts a value as an argument and returns true if this value exists in the array, else it return false.

Let’s take a look at the following example:

const arr = ['a', 'b', 'c', 'd'];

const val = 'e';

if(!arr.includes(val)) {

arr.push(val);

}

console.log(arr); //["a", "b", "c", "d", "e"]

In the above code, we have declared an array arr and a variable val. We are using the Array.includes() method to check if the value of val already exists in the array arr. If not, we are pushing this value into the array arr.

Array.indexOf() Method To Prevent Adding Duplicates To An Array In JavaScript

The Array.indexOf() method is very similar to the Array.includes() method discussed above. The only difference is that it returns the index of an element if it exists in the array, else it returns -1.

Let’s take a look at the following example:

const arr = ['a', 'b', 'c', 'd'];

const val = 'e';

if(arr.indexOf(val) === -1) {

arr.push(val);

}

console.log(arr); //["a", "b", "c", "d", "e"]

In the above code, we have declared an array arr and a variable val. We are using the Array.indexOf() method to check if the value of val already exists in the array arr. If not, we are pushing this value into the array arr. The indexOf() method returns -1 if the value is not present in the array.

Use A Set To Prevent Adding Duplicates To An Array In JavaScript

A Set is a data structure which contains only unique elements. Duplicate values are not allowed in a Set. So, if you convert an array to a Set, all duplicates will be removed. Then, you can convert this Set back to an array.

Let’s take a look at the following example:

const arr = ['a', 'b', 'c', 'd'];

const val = 'e';

const set = new Set(arr);

set.add(val);

const newArr = Array.from(set);

console.log(newArr); //["a", "b", "c", "d", "e"]

In the above code, we have declared an array arr and a variable val. We have converted this array to a Set using the Set() constructor. Then, we have added the value of val to this set using the add() method. Finally, we have converted this Set back to an array using the Array.from() method and stored it in a variable newArr.

This is how you can prevent duplicates from being added to an array in JavaScript.

I hope this article was helpful. Thanks for reading! 🙂