Replace an Element in an Array in JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Check out my new book

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

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

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

Indexes are zero-based in JavaScript, so the first element has an index of 0 and the last an index of arr.length - 1.

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

We set a delete count of 1, so the Array.splice() method will remove the array element at the specified index and will add the provided third argument at the same index.

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.
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']

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.

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.

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.
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 all array elements with 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 need. This is often easier to reason about and track in larger code bases.

Further Reading #

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.