Array.map and Typescript Object spread operator not mapping to original array

Question

I have an array of members in Typescript.

const members = [
  {
    name: 'John Lennon',
    id: 1
  },
  {
    name: 'Led Zeppelin',
    id: 2
  },
  {
    name: 'Freddie Mercury',
    id: 3
  }
];

When I try to map over it and add key

members.map(member => {
    member.designation = 'Singer';
    return member;
 });

It successfully overwrites an array and add key designation. But when I try doing the same thing using Object spread operator.

members.map(member => ({
  ...member,
  designation: 'Singer'
}));

It successfully compiles with no error, but at the same time does not map the key designation over my members array.

Is it the correct way to do, or am I missing something and it is just a problem with Typescript Object spread operation.

why do you have to use parentheses in the 2nd map call? I mean : member => ({... and not member => {...? I tried without parentheses and I got an error but I don't understand why... — jcmag
– jcmag, Commented Aug 31, 2020 at 8:42

Titian Cernicova-Dragomir · Accepted Answer · 2017-10-26 14:56:33Z

7

In the first example you modify the object, in the second one you create a new object, that will have the values of the original member and the new designation property. You need to take the new object array created by map and use that:

var memberWithDesignation = members.map(member => ({
  ...member,
  designation: 'Singer'
}));
console.log(memberWithDesignation[0].designation); // Will output Singer

answered Oct 26, 2017 at 14:56

Titian Cernicova-Dragomir

253k37 gold badges466 silver badges396 bronze badges

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

Collectives™ on Stack Overflow

Array.map and Typescript Object spread operator not mapping to original array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related