How to mutate original array in Javascript .map() function?

Question

For eg:

var persons = [{ "name":"A", "salary":1200 }, { "name":"B", "salary":"1500" }];

And you want to change the value of "salary" of each person in an original array.

Answer 1

If you want to mutate the original array, you can use Array#forEach function.

const persons = [{ "name":"A", "salary":1200 }, { "name":"B", "salary": 1500 }];

persons.forEach(item => item.salary += 1000);

console.log(persons)

Array#map creates a new array of the created items and returns that. After you need to assign the returned result.

let persons = [{ "name":"A", "salary":1200 }, { "name":"B", "salary": 1500 }];

persons = persons.map(item => {
  item.salary += 1000;
  return item;
});

console.log(persons);

Answer 2

You can mutate the objects directly iterating with map. If I understood you correctly.

persons.map(i => { i.salary = i.salary * 1.25; return i; });
console.log(persons);
// [{ "name":"A", "salary": 1875 }, { "name":"B", "salary": 2343.75 }]

Though it's anti-pattern and you should avoid performing mutations of your original array in map().

Answer 3

I read other answers, you can use any of them, but I see some problems there.

I will mention 2 methodologies I have used in many different languages, map and forEach. map is a functional way of traversing a collection and creating some new collection with new (different or same) elements, independent of languages. With map, it is expected to create a new collection that is created by some mapping from initial collection. On the other hand, forEach is a method that eases traversing a collection by not using usual for loop syntax for collections, and mutating (or changing) each item if desired.

If you use map on a collection that contains objects, and change those objects in the mapper function, you might face with unexpected behavior. Beacuse you are changing directly the object you are operating on, and do not mapping it to another object. This object might can be considered as a state and computers works based on the state transfers. If you want to change that object, i.e. some state, it is absolutely ok, but based on the description, you should not use map for such a case. Because you are not creating a new array with some new values, but instead, mutating provided elements. Use forEach for such a case.

I have added an example here. You can click the link and take a look at the console, and see my what I mean in a more clear way.

As far as I know, based on my experience, mutations in map method is considered as bad practice and discouraged.

These two are added for different purposes and it would be better to use them as expected.

For more, see Mozilla Web Docs page for Array.

Answer 4

Use forEach. If your array is full of objects, and you simply want to mutate those objects — like in the original question — then you can simply have your callback function mutate the item passed to it in its first argument.

If your array is full of primitives, which can only be changed by assigning something else to the array slots, thereby mutating the array — or if for some other reason you want to reassign things to the array slots — you can still use forEach. The second parameter and third parameters passed to the callback are the array index of the element currently being operated on, and a reference to the array itself. So within the callback function, you can assign to the relevant array slot.

Answer 5

you can use a simple for loop for that

var persons = [{ "name":"A", "salary":1200 }, { "name":"B", "salary":"1500" }];

for(let element of persons){
    element.salary*=2;
}

console.log(persons);

Answer 6

.map() function takes third parameter in its callback thats the instance of original array.

You could do something like this also:

var persons = [{ "name":"A", "salary":1200 }, { "name":"B", "salary":1500 }];

persons.map(function(person, key, array) {
  array[key].salary *= 2;
});

console.log(persons);

Answer 7

JavaScript has an inbuilt Array method map that iterate the values of an Array

persons.map(person => person["salary"] + 1000)

Answer 8

var persons = [{ "name":"A", "salary":1200 }, { "name":"B", "salary":"1500" }];

var mutatedPersons = persons.map(function(obj){
   return {name:obj.name,salary:parseInt(obj.salary) + 100};
})

console.log(mutatedPersons);

Answer 9

try:

let persons = persons.map((person) => {person['salary'] = parseInt(person['salary']) + 1; return person})

Answer 10

If you have an array of primitives, you can use this function:

function mapInplace<T>(arr: T[], callback: (v: T, i: number) => T) {
    for(const [i, v] of arr.entries()) {
        arr[i] = callback(v, i)
    }
}

Example usage:

mapInplace(weights, w => w / total)

There's no return value since it's mutating the array.