How to modify all the Array elements in JavaScript

Updating or modifying all the array elements is a frequent need in Javascript (or even React JS)? in this blogpost, lets see how can we do it.

Using _**Array.map()**_

The Array.map() can create a new array after applying a (mapping) function to each element in the original array. Let’s see how it helps us update all elements.

const originalArray = [1, 2, 3, 4, 5];
  
const updatedArray = originalArray.map(element => element * 2);

console.log(updatedArray); // 👉️ [2, 4, 6, 8, 10]
console.log(originalArray); // 👉️ [1, 2, 3, 4, 5] (original array remains unchanged)

In this example, we’ve doubled each element in the array without modifying the original array.

Using **_Array.reduce()_**

Array.reduce() is your go-to method for transforming an array into a single value or a more complex structure. While its primary purpose is not updating elements directly, we can leverage it for the task.

const originalArray = [1, 2, 3, 4, 5];
  
const updatedArray = originalArray.reduce((acc, element) => {
  acc.push(element * 2);
  return acc;
}, []);

console.log(updatedArray); // 👉️ [2, 4, 6, 8, 10]
console.log(originalArray); // 👉️ [1, 2, 3, 4, 5] (original array remains unchanged)

In this example, we’ve used Array.reduce() to build a new array by doubling each element.

Using for Loop: Classic approach

Sometimes, the old ways are the best ways. A simple for loop is a classic approach to updating array elements.

const originalArray = [1, 2, 3, 4, 5];
const updatedArray = [];

for (let i = 0; i < originalArray.length; i++) {
  updatedArray.push(originalArray[i] * 2);
}

console.log(updatedArray); // 👉️ [2, 4, 6, 8, 10]
console.log(originalArray); // 👉️ [1, 2, 3, 4, 5] (original array remains unchanged)

This loop iterates through the original array, doubling each element and pushing it to a new array.

Using Array.fill(): Set Them All

When you want to set all elements in an array to a specific value, you can use Array.fill().

const originalArray = [1, 2, 3, 4, 5];
const updatedArray = new Array(originalArray.length).fill(42);

console.log(updatedArray); // 👉️ [42, 42, 42, 42, 42]
console.log(originalArray); // 👉️ [1, 2, 3, 4, 5] (original array remains unchanged)

Here, we’ve created a new array filled with the value 42, effectively updating all elements.

🧪Practice Coding Problem: Square Array Elements ⏹

In the spirit of Test Driven Development ( 😁), lets test our understanding by solving a problem.

Implement a function that upgrades each element in an array by squaring it

Problem (JavaScript)

/**
* Upgrade all elements in the array by squaring them.
* @param {number[]} array - The original array.
* @returns {number[]} - The upgraded array.
*/
function upgradeArray(array) {
  // > > > 👉 Write code here 👈 < < <
}

const originalArray = [2, 3, 5, 7];
console.log(upgradeArray(originalArray)); // 👉️ [4, 9, 25, 49]

Please attempt before seeing the Answer:

function upgradeArray(array) {
  return array.map(element => element ** 2);
}

Now you know ways to keep your Javascipt arrays updated, always. ✨

Keep updating and keep coding 🚀!