Prevent adding Duplicates to an Array in JavaScript


Borislav Hadzhiev

Sat Nov 20 20212 min read


Photo by Kyle Cesmat

Prevent adding Duplicates to an Array #

To prevent adding duplicates to an array, call the includes() method on the array to check if the value is already present, e.g. if (!arr.includes(str)) {arr.push(str)}. The if condition will only be satisfied if the value is not present in the array.

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 a value to the array if it isn't already present.

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

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 the value.

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.

The includes method is not supported in Internet Explorer. If you have to support the browser, use indexOf instead.

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.
// Supported in IE 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.

Our if statement check if the return value from calling the method is equal to-1. If that's the case, we can conclude the value is not in the array, and add it.

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

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.

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

Set objects are much more limited than arrays, in terms of the methods they implement, however they have their use cases and storing unique value is the main one.

Use the search field on my Home Page to filter through my more than 1,000 articles.