Add Element to Array just if It Doesn't Exist in the Array
Tags: javascript, beginners, programming, coding
Published: 2023-06-08 19:21:47

## Introduction

In JavaScript, arrays allow duplicating elements and don’t guarantee the uniqueness of their elements.

However, in many cases, we need to push an element into an array just if it didn’t exist beforehand and ignore the process if it already existed.

So, how can we achieve this goal? I think while you landed on this page, you need a quick solution without much stuffing.

So, without further ado, let’s introduce the easiest and the more practical methods.

## Set()

JavaScript `Set` is a collection of unique values. Each value has to occur once in a Set.

If your **array’s elements were strings or numbers**, `Set` is the easiest way to achieve your goal.

```javascript
function addToArrayIfNotExist(val, arr) {
  arr.push(val);

  // Use new Set() to create a new collection, then create a new array from this collection
  const uniqueArr = Array.from(new Set(arr));

  return uniqueArr;
}

console.log(addToArrayIfNotExist(2, ['a', 'b', 'c', 1, 2])); // [ 'a', 'b', 'c', 1, 2 ]
console.log(addToArrayIfNotExist(3, ['a', 'b', 'c', 1, 2])); // [ 'a', 'b', 'c', 1, 2, 3 ]
```

## Includes() Or IndexOf()

These two ways would work fine if your **array’s elements were strings or numbers** as well.

Firstly, let’s try `includes()`:

```javascript
function addToArrayIfNotExist(val, arr) {
  const doesAlreadyExist = arr.includes(val);

  // Ignore the process
  if (doesAlreadyExist) return arr;

  // Or push the new value
  arr.push(val);

  return arr;
}

console.log(addToArrayIfNotExist(2, ['a', 'b', 'c', 1, 2])); // [ 'a', 'b', 'c', 1, 2 ]
console.log(addToArrayIfNotExist(3, ['a', 'b', 'c', 1, 2])); // [ 'a', 'b', 'c', 1, 2, 3 ]
```

Secondly, let’s try `indexOf()`:

```javascript
function addToArrayIfNotExist(val, arr) {
  const doesAlreadyExist = arr.indexOf(val);

  // Ignore the process (-1 means the element is not exist)
  if (doesAlreadyExist !== -1) return arr;

  // Or push the new value
  arr.push(val);

  return arr;
}

console.log(addToArrayIfNotExist(2, ['a', 'b', 'c', 1, 2])); // [ 'a', 'b', 'c', 1, 2 ]
console.log(addToArrayIfNotExist(3, ['a', 'b', 'c', 1, 2])); // [ 'a', 'b', 'c', 1, 2, 3 ]
```

## Find() Or FindIndex()

That’s great, but what should you do if your **array’s elements were objects**? The easiest way in such a case is to use either `find()` or `findIndex()` methods.

Firstly, let’s try `find()`:

```javascript
function addToArrayIfNotExist(objVal, arr) {
  // Suppose you check against the object id
  const doesAlreadyExist = arr.find((item) => item.id === objVal.id);

  // Ignore the process
  if (doesAlreadyExist) return arr;

  // Or push the new value
  arr.push(objVal);

  return arr;
}

console.log(addToArrayIfNotExist({ id: 2 }, [{ id: 1 }, { id: 2 }, { id: 3 }])); // [{ id: 1 }, { id: 2 }, { id: 3 }]
console.log(addToArrayIfNotExist({ id: 4 }, [{ id: 1 }, { id: 2 }, { id: 3 }])); // [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]
```

Secondly, let’s try `findIndex()`:

```javascript
function addToArrayIfNotExist(objVal, arr) {
  // Suppose you check against the object id
  const doesAlreadyExist = arr.findIndex((item) => item.id === objVal.id);

  // Ignore the process (-1 means the element is not exist)
  if (doesAlreadyExist !== -1) return arr;

  // Or push the new value
  arr.push(objVal);

  return arr;
}

console.log(addToArrayIfNotExist({ id: 2 }, [{ id: 1 }, { id: 2 }, { id: 3 }])); // [{ id: 1 }, { id: 2 }, { id: 3 }]
console.log(addToArrayIfNotExist({ id: 4 }, [{ id: 1 }, { id: 2 }, { id: 3 }])); // [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]

```

> Keep in mind, you can use these methods as well if the array’s elements were strings or numbers.

## Conclusion

In this article, we knew how to add an element to an array just if it did not exist in the given array.

Based on the elements types you can choose the proper way to do so:

1.  For numbers or strings elements, you can use `new Set()`, `includes()`, or `indexOf()`.
2.  For objects elements, you can use either `find()` or `findIndex()`.

In fact, there are other ways to achieve that goal, however, I introduced just the easiest and the more practical ways.

## Before you leave

If you found this article useful, check out these articles as well:

*   [4 Ways To Handle Asynchronous JavaScript](https://mayallo.com/asynchronous-javascript/)
*   [Is Interface Segregation Principle Redundant?](https://mayallo.com/solid-interface-segregation-principle/)
*   [MongoDB GridFS, Made Simple](https://mayallo.com/mongodb-gridfs/)