How to Replace an Element in an Array in JavaScript

avatar

Borislav Hadzhiev

Sun Oct 10 20213 min read

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.
index.js
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.

Note that the indexOf method returns -1 if it doesn't find an element with the supplied value.

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

Indexes are zero-based in JavaScript, so the first element has an index of 0 and the last an index of arr.length - 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.
index.js
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.

If you want to replace all array elements with the specific value, simply remove the break statement.

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.
index.js
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.

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

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee