Update all Elements in an Array in JavaScript

# Table of Contents

1. Update all elements in an array in JavaScript
2. Update all Elements in an Array using Array.map()
3. Update all Elements in an Array using Array.reduce()
4. Modify all Elements in an Array using a for loop
5. Set all Array Elements to a Specific Value using Array.fill()

# Update all elements in an array in JavaScript

To update all elements in an array:

1. Use the Array.forEach() method to iterate over the array.
2. Use the index of the current iteration to update each element.

Copied!
const arr = ['bobby', 'hadz', 'com'];

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

console.log(arr); // 👉️ [ 'bobby0', 'hadz1', 'com2' ]

The function we passed to the Array.forEach method gets called with each element in the array.

The function gets passed 3 arguments on each iteration:

1. The array element.
2. The current index.
3. The array that's being iterated.

You can use this approach to modify all array elements using any value.

Copied!
const arr = [1, 2, 3, 4, 5];

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

console.log(arr); // 👉️ [ 11, 12, 13, 14, 15 ]

On each iteration, we access the array element at the current index and update its value by adding 10 to it.

We could have achieved the same result by using a plain for loop. However, for loops are a bit more verbose and indirect.

# Update all Elements in an Array using Array.map()

This is a three-step process:

1. Use the Array.map() method to iterate over the array.
2. The Array.map() method gives us access to the current element and its index.
3. Use the index to modify the value of each element and return the result.

Copied!
const arr = ['bobby', 'hadz', 'com'];

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

// 👇️ [ 'bobby0', 'hadz1', 'com2' ]
console.log(newArray);

We used the map() method in a similar way to how we used the forEach() method.

The function we passed to Array.map() gets called with each element in the array and its index.

On each iteration, we modify the value of the current element using the index and return the result.

The map() method returns a new array containing the values returned from the callback function.

# Update all Elements in an Array using Array.reduce()

This is a two-step process:

1. Use the Array.reduce() method to iterate over the array.
2. Update the value of each element and return the accumulated array.

Copied!
const arr = ['bobby', 'hadz', 'com'];


const newArray = arr.reduce((accumulator, element, index) => {
  return [...accumulator, element + index];
}, []);

// 👇️ [ 'bobby0', 'hadz1', 'com2' ]
console.log(newArray);

The function we passed to the Array.reduce method gets called for each element in the array.

We initialized the accumulator variable to an empty array because that's what we passed as the second argument to the reduce() method.

The value we return from the callback function gets passed as the accumulator on the next iteration.

On each iteration, we use the spread syntax (...) to unpack the values of the array into a new array and add the current element + its index to the end of the array.

The Array.reduce() method returns a new array and doesn't mutate the original.

# Modify all Elements in an Array using a for loop

This is a two-step process:

1. Use a for loop to iterate over the array.
2. Use the current index to modify each array element.

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

The code sample is similar to the previous one that used the Array.forEach() method.

However, we used a for loop to iterate over the array.

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

Most experienced developers avoid mutating arrays and objects. Instead, they create new arrays containing the desired elements.

We can use the Array.map() or Array.reduce() methods to achieve this.

# Set all Array Elements to a Specific Value using Array.fill()

You can use the fill() method to set the elements on an array to a specific value.

The fill method changes the elements in an array, setting them to a static value and returns the modified array.

Copied!
const arr = new Array(3).fill('value');

// 👇️ ['value', 'value', 'value']
console.log(arr);

We called the Array.fill method on an existing array with a set length to fill the array with a specific value.

You can also use an existing array's length to determine the length of the new array.

Copied!
const existingArr = [1, 2, 3];

const newArr = new Array(existingArr.length).fill(100);
// 👇️ [100, 100, 100]
console.log(newArr);

The argument we passed to the fill() method is the value with which to fill the array.

The Array() constructor creates an array of N empty elements, which we can fill using the fill() method.

Copied!
// 👇️ [,,]
console.log(new Array(3))

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Check if Array has all Elements of Another Array - JavaScript
• Check if Array contains any element of another Array in JS
• Check if Two Arrays have the Same Elements in JavaScript
• Convert all Array Elements to Uppercase or Lowercase in JS
• Count Elements in an Array that match a Condition using JS
• Count the Unique Elements in an Array in JavaScript
• Create an Array with N elements, same Value in JavaScript
• Get the First and Last Elements of an Array in JavaScript
• Get the first N elements of an Array in JavaScript
• Get the last N elements of an Array in JavaScript