Prevent adding Duplicates to an Array in JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

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.
index.js
const arr = ['apple', 'pear', 'mango']; const str = 'apple'; if (!arr.includes(str)) { // ✅ only runs if value not in array arr.push(str); } console.log(arr); // 👉️ ['apple', 'pear', 'mango']

The only parameter we passed to the Array.includes method is the value to search for in the array.

The includes() method returns a boolean result:

  • true if the value is present in the array
  • false if it isn't

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.

index.js
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 first converts the value to a boolean and then flips it.

When you negate a falsy value, the operator returns true, in all other cases it returns false.

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

Prevent adding Duplicates to an Array using indexOf #

To prevent adding duplicates to an array:

  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 to the array.
index.js
const arr = ['apple', 'pear', 'mango']; const str = 'apple'; if (arr.indexOf(str) === -1) { arr.push(str); } console.log(arr); // 👉️ ['apple', 'pear', 'mango']

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

If the value is not present in the array, it 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.

An alternative approach is to use a Set 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.

index.js
const str = 'apple'; const set1 = new Set(['apple', 'pear', 'mango']); set1.add(str); console.log(set1); // 👉️ {'apple', 'pear', 'mango'}

We used the Set.add method to add a value to 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 less methods. However, they have their use cases and storing unique value is the main one.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.