Array.push() Element if does not exist using JavaScript

avatar

Borislav Hadzhiev

Wed Dec 01 20213 min read

banner

Photo by Tamara Bellis

Array.push() Element if does not exist #

To push an element in an array if it doesn't exist, use the includes() method to check if the value exists in the array, and push the element if it's not already present. The includes() method returns true if the element is contained in the array and false otherwise.

index.js
// โœ… With primitives const arr1 = ['a', 'b', 'c', 'd']; const value1 = 'e'; if (!arr1.includes(value1)) { arr1.push(value1); } // โœ… With Objects const arr2 = [{id: 1}, {id: 2}]; const value2 = {id: 3}; const index = arr2.findIndex(object => object.id === value2.id); if (index === -1) { arr2.push(value2); }

In the first example, we have an array of primitive values (strings).

We used the logical NOT (!) operator to negate the call to the Array.includes method.

The includes method returns true if the value is found in the array andfalse otherwise. If the value is not found in the array, we push it to the end of the array.

In our second example, we have an array of objects. We used the Array.findIndex method to get the index of the first element in the array that satisfies a specific condition.

In the example, the condition is that the element has to have an id property equal to a specific value.

The function we passed to the findIndex method gets called with each element in the array, until it returns a truthy value or iterates over the entire array.

If the condition is never satisfied, the findIndex method returns -1, otherwise it returns the index of the first element that satisfies the condition.

In our if statement, we check if the method returned -1. If it did, we know that the value is not present in the array and we should add it.

When working with primitives you can use the Array.indexOf method if you prefer it over includes().

To push an element in an array if it doesn't exist, use the indexOf() method to check if the value is present in the array. The indexOf method returns -1 if the value is not contained in the array, in which case we should use the push() method to add it.

index.js
const arr1 = ['a', 'b', 'c', 'd']; const value1 = 'e'; if (arr1.indexOf(value1) === -1) { arr1.push(value1); } console.log(arr1); // ๐Ÿ‘‰๏ธ ['a','b','c','d','e']

We used the indexOf method instead of includes. The indexOf method is supported in Internet Explorer, whereas includes isn't.

Note that this wouldn't work if the array contains objects, in which case we should be using the findIndex method.

The indexOf method takes a value, checks if it exists in an array. If it's found, the method returns the index of the first occurrence, otherwise it returns -1.

Our if statement checks if the value is not found in the array and adds it.

My personal preference is to use the include method where possible, because it's easier to read and more intuitive. I don't have to think about the implementation details of the method and whether it returns -1 like with indexOf.

Further Reading #

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee