How to Modify all Array Elements in JavaScript

Modify all Elements in an Array #

To change the value of all elements in an array:

1. Use the forEach() method to iterate over the array. The method takes a function that gets invoked with the array element, its index and the array itself.
2. Use the index of the current iteration to change the corresponding array element.

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

arr.forEach((element, index) => {
  arr[index] = element + index;
});

console.log(arr); // 👉️ ['a0', 'b1', 'c2']

The function we pass to the Array.forEach method gets invoked with each element, its corresponding index and the entire array.

We could have achieved the same result using a plain for loop, however this solution is more verbose and indirect.

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

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

console.log(arr); // 👉️ ['a0', 'b1', 'c2']

It's a matter of personal preference, but in my opinion the forEach approach is more readable and intuitive.

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

const newArr = arr.map((element, index) => {
  return element + index;
});

console.log(newArr); // 👉️ ['a0', 'b1', 'c2']

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

In the code snippet, we use the Array.map in a very similar way to how we used the forEach method, however this time we don't change the elements in the original array, instead we create a new array containing the modified elements.