Find and Replace elements in Array with JavaScript
Tags: javascript, codenewbie, tutorial, beginners
Published: 2020-07-06 22:54:46

---
canonical_url: https://inspiredwebdev.com/find-replace-in-array
---

> This article was originally posted on my [blog](https://inspiredwebdev.com/find-replace-in-array). Head over to [inspiredwebdev.com](https://inspiredwebdev.com) for more articles and tutorials. Check out my **JavaScript course** on [Educative](https://www.educative.io/courses/complete-guide-to-modern-javascript?aff=BqmB) to learn everything from ES6 to ES2020.

&nbsp;

Arrays are a very common data structure and it's important to know how to manipulate them by retrieving, adding, and replacing data inside of them.

In this article, we are going to learn what are the different ways to find and replace items inside of arrays.

&nbsp;

## Check that an Array contains a value

First, let's look at different ways of checking if our Array includes a certain value provided.

We can do that in different ways such as:

```js
const arr = [1,2,3,4,5];

arr.includes(2);
// true
arr.includes(6);
// false
```

`Array.includes` is probably the easiest method to remember and it will return us `true` or `false` if our Array includes or not the value we passed.

This method can take an additional argument which defines the index from where we want to start looking, leave empty if you want to check the whole Array.

Let's continue with more methods:

```js
const arr = [1,2,3,4,5];

!!arr.find((a) => a === 2);
// true
!!arr.find((a) => a === 6);
// false
```

`Array.find` is also another method we can use to check if our Array contains a certain value.
 
This method will return the value itself or undefined if no value is found so we can use the `!!` operator to convert the result to boolean and quickly see if there's a match or not.

It's a more powerful method compared to `Array.includes` as we can pass a callback to it, not just a value to check, meaning that we can do more complex checks such as:

```js
const arr = [1,2,3,4,5];

!!arr.find((a) => a > 2 && a < 4);
// true
```

Being able to pass a callback to it it means that unless your check is a very straightforward one, you are most likely going to use `find` over `includes`.

You can pass a second argument to the callback function defining the starting point where to start checking, leave empty to check the whole Array.

Next up we have `Array.indexOf` and `Array.findIndex`:

```js
const arr = [1,2,3,4,5];

arr.indexOf(1) !== -1;
// true
arr.indexOf(6) !== -1;
// false

arr.findIndex((el) => el === 1) !== -1;
// true
arr.findIndex((el) => el === 6) !== -1;
// false
```

`Array.indexOf` and `Array.findIndex` are similar because they both return the index of the first matching element found in our Array, returning us `-1` if it's not found.

To check if an element exists, we simply need to check if the returned value is `-1` or not.

These methods are useful because they can be used to both checks if an element exists in the Array while at the same time getting a reference as to where that element is positioned, which we can use to then replace that said element.

The difference between the two methods is the same as the one we saw between `Array.includes` and `Array.find`, where the first one (`Array.indexOf`) will accept a value to check whereas the second one (`Array.findIndex`) will accept a callback to perform more advanced checks.

Similarly to all the methods we previously saw, you can also define a starting index where to start check the Array.

Next up are two new metho introduced in ES6 (ES2015):

```js
const arr = [1,2,3,4,5];

arr.some((el) => el === 2);
// true
arr.every((el) => el === 3);
// false
```

`Array.some` will check if at least one value in the array matches the condition in our callback function and `Array.every` will check that ALL of the elements in the Array match that condition.

&nbsp;


## Replacing an element of an Array at a specific index

Now that we know how to check if the Array includes a specific element, let's say we want to replace that element with something else.

Knowing the methods above, it couldn't be easier!

In order to replace an element we need to know its index, so let's see some examples using the methods we just learned:

```js
const arr = [1,2,3,4,5];

const index = arr.indexOf(2);
arr[index] = 0;
arr;
// [1,0,3,4,5];
```

As you can see, first, we got the index of the element we wanted to change, in this case, the number 2 and then we replaced it using the brackets notation `arr[index]`.

We can do the same using `findIndex`:

```js
const arr = [1,2,3,4,5];

const index = arr.findIndex((el) => el === 2);
arr[index] = 0;
arr;
// [1,0,3,4,5];
```

Pretty easy right? Using `findIndex` we can also check scenarios like the following where we have an Array of Objects:

```js
const arr = [
    {
        id:1,
        val: 'one'
    },
    {
        id:2,
        val: 'two'
    },
    {
        id:3,
        val: 'three'
    },
    {
        id:4,
        val: 'four'
    },
    {
        id:5,
        val: 'five'
    },
];

const index = arr.findIndex((el) => el.id === 2);
arr[index] = {
    id:0,
    val: 'zero'
};
arr;
// [
//     {
//         id:1,
//         val: 'one'
//     },
//     {
//         id:0,
//         val: 'zero'
//     },
//     {
//         id:3,
//         val: 'three'
//     },
//     {
//         id:4,
//         val: 'four'
//     },
//     {
//         id:5,
//         val: 'five'
//     },
// ];
```

As you can see, using `findIndex` we can easily find and then replace Objects in an Array of Objects.

Let's say we are not interested in replacing a value but we just want to remove it, we will now look at different ways of doing so.

&bnbsp;

## Removing a value from an Array

First, let's look at the more basic methods to remove values from an Array: `Array.pop` and `Array.shift`

```js
const arr = [1,2,3,4,5];
arr.pop();
arr;
// [1,2,3,4]

const arr2 = [1,2,3,4,5];
arr2.shift();
arr2;
// [2,3,4,5];
```

`Array.pop` will remove the **last** element of the Array while `Array.shift` will remove the **first** one. No additional arguments are allowed, so you can see that these methods are fairly basic.

Both methods will modify your origianl array and both return the removed element so you can do the following:

```js
const arr = [1,2,3,4,5];
const el = arr.pop();
el;
// 1
```

Now we will look at a couple of ways to remove a specific element from an array.

First, let's look at `Array.splice` used in combination with `Array.indexOf`.

`Array.splice` allows us to remove elements from an Array starting from a specific index. We can provide a second argument to specify how many elements to delete.

```js
const arr = [1,2,3,4,5];
const index = arr.indexOf(2);

arr.splice(index,1);
arr;
// [1,3,4,5];

const arr2 = [1,2,3,4,5];
const index = arr2.indexOf(2);

arr2.splice(index);
arr2;
// [1]
```

As you can see, in the first example we specified 1 as the number of elements to remove, whereas in the second example we didn't pass any argument thus removing all items in the array from our starting index.

`Array.splice` will modify your original array and return the removed elements so you can do the following:

```js
const arr = [1,2,3,4,5];
const index = arr.indexOf(2);

const splicedArr = arr.splice(index,1);
arr;
// [1,3,4,5];

splicedArr;
// [2]
```

Next up, we can also remove elements from an array based on a condition and not just on an index with the use of `Array.filter`:

```js
let arr = [1,2,3,4,5];
const newArr = arr.filter((el) => el >2);

newArr;
// [3,4,5]
arr;
// [1,2,3,4,5];
```

Differently from  `Array.pop`, `Array.shift` and `Array.splice` , `Array.filter` creates a new array with all the elements that pass the condition in the callback function so your original array won't get modified as you can see from the code above.

In this case, our new Array consisted of all the elements of the original that are greater than 2.

---

Thank you very much for reading. Follow me on [DevTo](https://dev.to/albertomontalesi) or on my blog at [inspiredwebdev](https://inspiredwebdev.com/) or on [twitter](https://twitter.com/montalesi). Check out [Educative.io](https://www.educative.io/explore?aff=BqmB) for interactive programming courses. 

Disclaimer: Links to Amazon and Educative are affiliate links, purchases you make will generate extra commissions for me. Thank you

<div className="promotional_banner">
<a href="http://a-fwd.to/jHO6m9t" target="_blank">
<img alt="book banner" src="https://raw.githubusercontent.com/AlbertoMontalesi/The-complete-guide-to-modern-JavaScript/master/assets/banner.jpg" />
</a>
<span>Get my ebook on <a href="http://a-fwd.to/jHO6m9t" target="_blank">Amazon</a> and <a href="https://leanpub.com/completeguidetomodernjavascript2020" target="_blank">Leanpub</a></span>
</div>