Replace an Element in an Array in JavaScript

Replace an Element in an Array in JavaScript #

To replace an element in an array:

1. Use the indexOf() method to get the index of the element.
2. Use bracket notation to 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 value a.

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

We check that 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() #

To replace an element in an array:

1. Use the indexOf() method to get the index of the element you want to replace.
2. Call the Array.splice() method to replace the element at the specific index.
3. The array element will get 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.

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 #

To replace an element in an array:

1. Use a for loop to iterate for array.length times.
2. On each iteration, check if the array element is the element 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 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.

Replace an Element in an Array using map() #

To replace an element in an array:

1. Use the map() method to iterate over the array.
2. Check if the value of 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 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 all array elements with value of a setting them to a value of z.

Further Reading #

• How to Remove Element(s) from an Array in JavaScript
• Remove Object from an Array by its Value in JavaScript
• Remove Duplicates from an Array in JavaScript
• Remove the first N elements from an Array in JavaScript
• Remove the last N elements from an Array in JavaScript
• Replace the first Element of an Array in JavaScript
• Remove the Last 2 Elements from an Array in JavaScript