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

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

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); }

The array in the first example contains 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 and false otherwise. If the value is not in the array, we push it to the end of the array.

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

The condition in the example 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.
index.js
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); } // 👇️ [{ id: 1 }, { id: 2 }, { id: 3 }] console.log(arr2);

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.

You can also use the Array.indexOf method when working with primitives.

To push an element to 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.

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 and 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 includes method 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 #

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.