Update all Elements in an Array in JavaScript

avatar
Borislav Hadzhiev

Last updated: Dec 22, 2022
4 min

banner

# 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.
index.js
const arr = ['bobby', 'hadz', 'com']; arr.forEach((element, index) => { arr[index] = element + index; }); console.log(arr); // ๐Ÿ‘‰๏ธ [ 'bobby0', 'hadz1', 'com2' ]

update all elements in array

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.
We used the index to change the value of the array element at the specific position.

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

index.js
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.
index.js
const arr = ['bobby', 'hadz', 'com']; const newArray = arr.map((element, index) => { return element + index; }); // ๐Ÿ‘‡๏ธ [ 'bobby0', 'hadz1', 'com2' ] console.log(newArray);

update all elements in array using array map

We used the map() method in a 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.

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.
index.js
const arr = ['bobby', 'hadz', 'com']; const newArray = arr.reduce((accumulator, element, index) => { return [...accumulator, element + index]; }, []); // ๐Ÿ‘‡๏ธ [ 'bobby0', 'hadz1', 'com2' ] console.log(newArray);

update all elements in array using array reduce

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.
index.js
const arr = ['a', 'b', 'c']; for (let index = 0; index < arr.length; index++) { arr[index] = arr[index] + index; } console.log(arr); // ๐Ÿ‘‰๏ธ ['a0', 'b1', 'c2']

modify all elements in array using for loop

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.

index.js
const arr = new Array(3).fill('value'); // ๐Ÿ‘‡๏ธ ['value', 'value', 'value'] console.log(arr);

set all array elements to specific value using array fill

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.

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

index.js
// ๐Ÿ‘‡๏ธ [,,] console.log(new Array(3))

# Additional Resources

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

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.

Copyright ยฉ 2024 Borislav Hadzhiev