How to Replace an Element in an Array in JavaScript

# Table of Contents

1. Replace an Element in an Array in JavaScript
2. Replace an Element in an Array using Array.splice()
3. Replace an Element in an Array using a for loop
4. Replace an Element in an Array using Array.map()
5. Replace an Element in an Array using Array.forEach()

# Replace an Element in an Array in JavaScript

To replace an element in an array:

1. Use the Array.indexOf() method to get the index of the element.
2. Change the value of the element at the specific index.
3. The value of the array element will get updated in place.

Copied!
const arr = ['a', 'b', 'c'];

const index = arr.indexOf('a'); // 👉️  0

if (index !== -1) {
  arr[index] = 'z';
}

console.log(arr); // 👉️ ['z', 'b', 'c']

We used the Array.indexOf() method to get the index of the array element with a value of a.

Copied!
const arr = ['a', 'b', 'c'];

const index = arr.indexOf('a');

console.log(index); // 👉️ 0

We then replaced the element at that index with a new value.

Copied!
const arr = ['a', 'b', 'c'];

const index = arr.indexOf('a'); // 👉️  0

if (index !== -1) {
  arr[index] = 'z';
}

console.log(arr); // 👉️ ['z', 'b', 'c']

We check if the method didn't return an index of -1 to be sure that an element with the specified value exists.

Alternatively, you can use the Array.splice() method.

# Replace an Element in an Array using Array.splice()

This is a three-step process:

1. Use the indexOf() method to get the index of the element to be replaced.
2. Use the Array.splice() method to replace the element at the specific index.
3. The array element will be replaced in place.

Copied!
const arr = ['a', 'b', 'c'];

const index = arr.indexOf('a'); // 👉️  0

arr.splice(index, 1, 'z');

console.log(arr); // 👉️ [ 'z', 'b', 'c' ]

We passed the following 3 arguments to the Array.splice method:

1. Start index - the index at which to start changing the array.
2. delete count - how many elements should be deleted from the array.
3. Item1 - the item to add to the array.

We set the start index to the index of the array element we want to replace.

Copied!
const arr = ['a', 'b', 'c'];

const index = arr.indexOf('a'); // 👉️  0

arr.splice(index, 1, 'z');

console.log(arr); // 👉️ [ 'z', 'b', 'c' ]

In practice, we remove the array element at the specified index and then insert a different value at the same index, so we end up replacing the array element.

An alternative approach is to use a basic for loop.

# Replace an Element in an Array using a for loop

This is a three-step process:

1. Use a for loop to iterate for array.length iterations.
2. Check if each array element is the one to be replaced.
3. If the condition is met, replace the element at the index and break out of the for loop.

Copied!
const arr = ['a', 'b', 'c'];

for (let index = 0; index < arr.length; index++) {
  if (arr[index] === 'a') {
    arr[index] = 'z';
    break;
  }
}

console.log(arr); // 👉️ ['z', 'b', 'c']

We used a basic for loop to iterate over the array. On each iteration, we check if the current element is the one we want to replace.

Once we find and replace the element, we break out of the loop to avoid unnecessary work.

Copied!
const arr = ['a', 'b', 'c', 'a', 'a'];

for (let index = 0; index < arr.length; index++) {
  if (arr[index] === 'a') {
    arr[index] = 'z';
  }
}

console.log(arr); // 👉️ [ 'z', 'b', 'c', 'z', 'z' ]

We didn't use a break statement, so we replaced all elements with a value of a with elements with a value of z.

An alternative solution is to not change the original array, but instead, create a new array containing the desired values.

We can use the Array.map() method to achieve this.

# Replace an Element in an Array using Array.map()

This is a three-step process:

1. Use the Array.map() method to iterate over the array.
2. Check if the current element is the one to be replaced.
3. If the condition is met, return the replacement value, otherwise, return the original value.

Copied!
const arr = ['a', 'b', 'c'];

const newArr = arr.map(element => {
  if (element === 'a') {
    return 'z';
  }
  return element;
});

console.log(newArr); // 👉️ ['z', 'b', 'c']

console.log(arr) // 👉️ ['a', 'b', 'c']

The function we passed to the Array.map() method gets called with each element in the array.

In the example, we replace all array elements with a value of a, setting them to a value of z.

We didn't change the contents of the original array and instead created a new array with the values we needed. This is often easier to reason about and track in larger code bases.

I've also written a detailed guide on how to filter an array of objects based on a property.

You can also use the Array.forEach() method to replace the array elements in place.

# Replace an Element in an Array using Array.forEach()

This is a three-step process:

1. Use the Array.forEach() method to iterate over the array.
2. Check if each element is the one to be replaced.
3. If the condition is met, replace the element with the replacement value.

Copied!
const arr = ['a', 'b', 'c', 'a', 'a'];

arr.forEach((element, index) => {
  if (element === 'a') {
    arr[index] = 'z';
  }
});

// 👇️ [ 'z', 'b', 'c', 'z', 'z' ]
console.log(arr);

The function we passed to the Array.forEach() method gets called with each element in the array.

On each iteration, we check if the current element is the one to be replaced.

If the condition is met, we replace the element with the replacement value.

The forEach() method is useful if you need to replace all occurrences of the value in the array.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Filter an Array with Multiple Conditions in JavaScript
• Filter an Array of Objects based on a property in JavaScript
• Filter an Array to only Numbers in JavaScript