How to Change Values in an Array when Doing foreach Loop in JavaScript ?

The forEach loop in JavaScript is one of the several ways to iterate through an array. ForEach method is different from all other looping methods as it passes a callback function for each element in the array.

So, the possible approach to change the values in the array when doing foreach method in JavaScript, the method will not directly change the object that calls it, but that object may be changed by the callback function. In other words, you can change values in an array by accessing and assigning a new value during each iteration.

Syntax:

array.forEach(function(element, index, arr), thisValue)

The forEach method passes a callback function for each element of an array together with the following parameters:

• function(element, index, arr): A function that runs for every element in the array.
  • element: It is the value of the current element in the array. It’s a required parameter.
  • index: The index of the current element. It’s an optional parameter.
  • arr: The array for which forEach() method was called upon. It’s an optional parameter.
• thisValue: A value passed to the function as this value.

Approaches: If an array contains primitive data types:

Example: In this example, the callback function takes two argument elements and an index where the element refers to the current element being processed and the index refers to the current index. The foreach passes a callback function for each element in the array. To change the values in the array while looping through it, you can access the current element by its index and modify its value directly within the callback function. 

Javascript

let arr = [1, 2, 3];
arr.forEach((element, index) => {
    arr[index] = element + 10;
});
console.log(arr);

Here callback function takes the current element(i.e element) and adds it with 10 and then sets the current element’s value in the array to the result of the addition. 

Output:

[ 11, 12, 13 ]

If the array contains reference data types:

1) Changing the whole object: If the array contains reference data types then we need little modification. Still, the logic remains the same as we will access the current element by its index and modify its value directly within the callback function.

Example:In this example, the callback function takes the current element and index. We now set the value of the current element in the array to the new object with the name GFG and age 4.

Javascript

let arr = [
      {"name": "Geeks", "roll": 1},
      {"name": "For", "roll": 2},
      {"name": "Geeks", "roll": 3}
];

arr.forEach((element, index) => {
    arr[index] = {"name": "GFG", "age": 4};
});

console.log(arr);

Output:

[
     { name: 'GFG', age: 4 },
     { name: 'GFG', age: 4 },
     { name: 'GFG', age: 4 }
]

2) Changing only a single key in the Object: In this example, we are doing the same thing as the above example but in this, we are changing only a single key(i.e. name) of the object instead of changing the whole object during iteration. Here we are changing the key value(i.e. name) to GFG.

Example:

Javascript

let arr = [
    {"name": "Geeks", "roll": 1},
    {"name": "For", "roll": 2},
    {"name": "Geeks", "roll": 3}
];

arr.forEach(function(item, index) {
    arr[index].name = "GFG";
});

console.log(arr);

Output:

[
     { name: 'GFG', roll: 1 },
     { name: 'GFG', roll: 2 },
     { name: 'GFG', roll: 3 }
]

In this way, we can change the values in the array when doing foreach in JavaScript.