Js change object inside array in for each loop

Question

I want to change the current object in for each loop and it does not work, Why it is not working and how can i do this?

var arr = [{num: 1}, {num: 2}];

arr.forEach(function(item) {
  item = {somethingElse: 1}
});

console.log(arr);

Answer 1

It's not working because all you're doing is updating the value of the argument you were given (item), which doesn't have a live connection to the array. That change disappears as soon as your callback returns.

The most appropriate way to do this is to use map:

var arr = [{num: 1}, {num: 2}];

arr = arr.map(function(item) {
  return {somethingElse: 1};
});

console.log(arr);

map gives your function each item and builds a new array from whatever you return.

If it's important that you update the array in-place instead of building a new one, you can use forEach, you just have to assign back to the array element you're updating. The second argument to forEach's callback is the index you're visiting, so:

var arr = [{num: 1}, {num: 2}];

arr.forEach(function(item, index) {
  arr[index] = {somethingElse: 1};
});

console.log(arr);

---

Of course, in both cases above, you'd actually be using item for something, which you aren't in your example code... If you wanted to add/remove properties on item, not replace the object entirely, Cyril's answer shows you how to do that.

Answer 2

Another variety to the list of answers

var arr = [{num: 1}, {num: 2}];

arr.forEach(function(item) {
  item.something = 2;//setting the value
  delete item.num;//deleting the num from the object
});