Prevent adding Duplicates to an Array in JavaScript

# Prevent adding Duplicates to an Array

To prevent adding duplicates to an array:

1. Use the Array.includes() method to check if the value is not present in the array.
2. If the value is not present, add it to the array using the push() method.
3. The array will not contain any duplicate values.

Copied!
const arr = ['bobby', 'hadz', 'com'];

const str = 'bobby';

if (!arr.includes(str)) {
  // ✅ only runs if value not in array
  arr.push(str);
}

console.log(arr); // 👉️ [ 'bobby', 'hadz', 'com' ]

The Array.includes() method returns true if the supplied value is contained in the array and false otherwise.

We used the logical NOT (!) operator to negate the call to the includes() method because we want to add the value only if it isn't already present in the array.

Here are some more examples of using the logical NOT (!) operator.

Copied!
console.log(!true); // 👉️ false
console.log(!false); // 👉️ true

console.log(!'hello'); // 👉️ false
console.log(!''); // 👉️ true
console.log(!null); // 👉️ true

You can imagine that the logical NOT (!) operator:

1. converts the value to a boolean
2. flips the boolean

Falsy values are: null, undefined, empty string, NaN, 0 and false.

All other values are truthy.

# Prevent adding duplicates from a collection to an array

You can use this approach to iterate over a collection and only add non-duplicate values to an array.

Copied!
const arr = ['bobby', 'hadz', 'com'];

const values = ['bobby', 'com', 'a', 'b', 'c'];

values.forEach(value => {
  if (!arr.includes(value)) {
    arr.push(value);
  }
});

// 👇️ [ 'bobby', 'hadz', 'com', 'a', 'b', 'c' ]
console.log(arr);

The function we passed to the Array.forEach() method gets called with each element in the array.

On each iteration, we check if the current value doesn't exist in the array.

If the condition is met, we push the value into the array.

# Prevent adding Duplicates to an Array using indexOf

This is a three-step process:

1. Use the indexOf() method to check that the value is not present in the array.
2. The indexOf method returns -1 if the value is not contained in the array.
3. If the condition is met, push the value into the array.

Copied!
const arr = ['bobby', 'hadz', 'com'];

const str = 'bobby';

if (arr.indexOf(str) === -1) {
  arr.push(str);
}

console.log(arr); // 👉️ [ 'bobby', 'hadz', 'com' ]

The Array.indexOf() method returns the index of the first occurrence of the supplied value in the array.

If the value is not contained in the array, the method returns -1.

The if statement checks if the indexOf method returned -1.

If it did, the value is not present in the array, so we use the push() method.

# Prevent adding duplicates by using a Set object

An alternative approach is to use a Set() constructor object instead of an array.

Set objects store a collection of unique values. This makes it impossible to add a duplicate value to a Set.

Copied!
const str = 'bobby';

const set1 = new Set(['bobby', 'hadz', 'com']);

set1.add(str);

// 👇️ Set(3) { 'bobby', 'hadz', 'com' }
console.log(set1);

The Set.add() method inserts a new element with the supplied value into a Set object, if the value is not already in the Set.

The value is already contained in the Set, so our call to the add method didn't do anything.

Set objects are much more limited than arrays and implement fewer methods.

However, they have their use cases and storing unique values is the main one.

You can also remove the duplicates from an array by converting the array to a Set.

Copied!
const arr = ['a', 'a', 'b', 'b', 'c', 'c'];

const set1 = new Set(arr);

// 👇️ Set(3) { 'a', 'b', 'c' }
console.log(set1);

Passing an array containing duplicates to the Set() constructor automatically removes all duplicates.

You can use the Array.from() method if you need to convert the Set back to an array.

Copied!
const arr = ['a', 'a', 'b', 'b', 'c', 'c'];

const withoutDuplicates = Array.from(new Set(arr));

console.log(withoutDuplicates); // 👉️ [ 'a', 'b', 'c' ]

The Array.from() method creates a new, shallow-copied array from the provided iterable.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Remove Duplicates from an Array of Objects in JavaScript
• Check if an Array contains Duplicates in JavaScript
• Count the Duplicates in an Array in JavaScript