update array of object base on property value using es6 map

Question

I have this array of object

[
  {
    "name": "Alice",
    "age": 10
  },
  {
    "name": "Samantha",
    "age": 20
  },
  {
    "name": "Mary",
    "age": 19
  }
]

How can I update Alice's age to 11?

I tried using map of es6

const newage = 11;
 const newDate = person.map(obj => 
      return 'Alice' === obj.name ? obj.age= newage : obj
    )

The reason why I map instead of normal for loop is that I do not want to mutate the origin person object, is that correct?

"is that correct" No. .map will create a new array, but obj.age= newage will still mutate the object. .map already existed before ES6 btw. — Felix Kling
– Felix Kling, Commented Mar 8, 2017 at 0:03

Jonnny · Accepted Answer · 2020-01-29 14:14:35Z

2

The problem is that as you loop through the array with Array.map, the objects you access and update the age with are still the originals, and you push the exact same objects to the new array that Array.map creates.

So an intuitive way to fix this, is to clone new objects and update the new objects. I made a example for you so you can see the outcome.

const original = [
  {"name": "Alice","age": 10},
  {"name": "Samantha","age": 20},
  {"name": "Mary","age": 19}
];
const newage = 11;
const newData = original.map(obj => {
  // clone the current object
  const newObj = Object.assign({}, obj);
  // update the new object
  if (newObj.name === 'Alice') newObj.age = newage;
  return newObj;
});

edited Jan 29, 2020 at 14:14

Jonnny

5,04912 gold badges67 silver badges98 bronze badges

answered Mar 8, 2017 at 4:15

dawchihliou

2461 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

update array of object base on property value using es6 map

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related