How to Replace an Element in an Array in JavaScript

Replace an Element in an Array #

To replace an element in an array:

1. Use the indexOf() method to get the index of the element. The indexOf method returns the first index at which the element can be found or -1 if the element is not in the array.
2. Using bracket notation change the value of the element at the specific index.

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

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

if (indexOf !== -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 value a.

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

To be sure that the indexOf method found an element with the specified value we check that the returned index is not -1.

An alternative approach is to use a basic for loop.

To replace an element in an array:

1. Use a for loop to iterate for array.length times.
2. In each iteration, check if the array element at the current index is the element to be replaced.
3. If the condition is met, replace the element at that 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']

In this example we use a basic for loop and on each iteration we check if the 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.

An alternative solution is to not change the original array, but instead create a new array containing the desired values. To achieve this we can use the map method.

To replace an element in an array:

1. Use the map() method to iterate over the array.
2. Conditionally check if the value of the current element is the one we are looking to replace.
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 of the array.

The map method returns a new array, containing the values we return from the callback function.

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