Blog

To push an element in a JavaScript array if it doesn’t exist –

1. For primitive values, use the Array.includes() or Array.indexOf() method to check if an element already exists, else push the element in the array.
2. For objects, use the Array.findIndex() method to check if an element already exists, else push the element in the array.
3. You can even use a Set to push an element into an array.

Let’s look at each of these solutions in detail.

Push An Element In A JavaScript Array If It Doesn’t Exist

Array.includes() To Push An Element In Array If It Doesn’t Exist

The Array.includes() method checks whether an array contains a certain value among its elements.

This method returns a boolean value – true if the value exists in the array, and false if it does not.

We can use this boolean value to push an element in a JavaScript array if it doesn’t exist already.

The syntax of the Array.includes() method is as follows:

arr.includes(searchElement)

This method takes in a single parameter – searchElement, which is the element to be searched for in the array.

Now let’s see how we can use this method to push an element in a JavaScript array if it doesn’t exist already.

Suppose we have an array of numbers named arr and we want to push the number 5 into it only if it doesn’t exist already.

Here’s how we can do it:

var arr = [];

if (!arr.includes(5)) {

   arr.push(5);

}

console.log(arr); // [5]

As you can see, we first check if the number 5 is already present in the array using the Array.includes() method.

If it’s not present, we push it into the array using the Array.push() method.

Finally, we print the contents of the array to the console.

Note that Array.includes() is not supported by Internet Explorer, so use the next method for IE.

Array.indexOf() To Push An Element In Array If It Doesn’t Exist

The Array.indexOf() method returns the index of the first element in an array that has a given value.

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

We can use this return value to push an element in a JavaScript array if it doesn’t exist already.

The syntax of the Array.indexOf() method is as follows:

arr.indexOf(searchElement)

This method takes in a single parameter – searchElement, which is the element to be searched for in the array.

Now let’s see how we can use this method to push an element in an array if it doesn’t exist already.

Suppose we have an array of numbers named arr and we want to push the number 5 into it only if it doesn’t exist already.

Here’s how we can do it:

var arr = [];

if (arr.indexOf(5) === -1) {

  arr.push(5);

}

console.log(arr); // 5

As you can see, we first check if the number 5 is already present in the array using the Array.indexOf() method.

If it’s not present (i.e., if the returned value is -1), we push it into the array using the Array.push() method.

Finally, we print the contents of the array to the console.

This method is supported by Internet Explorer.

Array.findIndex() To Push An Element In Array If It Doesn’t Exist

The Array.findIndex() method returns the index of the first element in an array that satisfies a given condition.

If no such element is found, this method returns -1.

We can use this return value to push an element into an array only if it doesn’t exist already.

The syntax of the Array.findIndex() method is as follows:

arr.findIndex(callback)

This method takes in a single parameter – callback, which is a function that defines the condition to be checked for each element in the array.

This function takes in three parameters – value, index, and arr.

Now let’s see how we can use this method to push an element in an array if it doesn’t exist already.

Suppose we have an array of numbers named arr with object entries and we want to insert a new object into it only if an object with the same id doesn’t exist already.

Here’s how we can do it:

var arr = [];

arr.push({id: 1, name: ‘John’, age: 20});

arr.push({id: 2, name: ‘Jane’, age: 30});

var newObj = {id: 3, name: ‘Mike’, age: 25};

var index = arr.findIndex(function(obj) {

  return obj.id === newObj.id;

});

if (index === -1) {

  arr.push(newObj);

}

console.log(arr); // arr = {id: 1, name: ‘John’, age: 20},{id: 2, name: ‘Jane’, age: 30},{id: 3, name: ‘Mike’, age: 25}

As you can see, we first create an empty array named arr.

Then we push two objects into it.

After that, we create a new object named newObj that we want to insert into the array only if an object with the same id doesn’t exist already.

Next, we use the Array.findIndex() method to find the index of the first object in the array that has the same id as newObj.

If no such object is found, the returned index value is -1.

Finally, we use the Array.push() method to insert the newObj object into arr only if its index value is -1 (i.e., if it doesn’t exist already).

This method is supported by Internet Explorer from version 9.

Set To Push An Element In Array If It Doesn’t Exist

A Set is a collection of unique items.

This means that you can’t insert duplicate values into a Set.

We can use this feature to push an element into an array only if it doesn’t exist already.

The syntax of the Set constructor is as follows:

new Set(iterable)

This constructor creates a new Set and, optionally, initializes it with the values from the iterable object.

Now let’s see how we can use this constructor to push an element in an array if it doesn’t exist already.

Suppose we have an array of numbers named arr and we want to insert the number 5 into it only if it’s not present already.

Here’s how we can do it:

var arr = [];

var set = new Set(arr);

set.add(5);

console.log([...set]); // arr = 5

As you can see, we first create an empty array named arr.

Then we create a new Set object from the values in arr using the Set constructor.

After that, we use the Set.add() method to insert the number 5 into our set only if it doesn’t exist already.

Finally, we use the spread operator (…) to convert our set back into an array and print it to the console.

This method is supported by all major browsers.

Conclusion

In conclusion, there are several ways to push an element in a JavaScript array if it doesn’t exist already.

You can use the Array.includes() method, the Array.indexOf() method, the Array.findIndex() method, or a Set object.

Which method you choose depends on your specific needs.