issue with spread operator in javascript

Question

I want to rewrite an array and to get a new one at the final. This is my code:

const arr = [
  {
    type:"Fiat", model:"500", color:"white"
  },
  {
    type:"ford", model:"5300", color:"gray"
  }
];
const newArr = arr.map(i => {
    const r = {
      ...arr,
      power:2
    }
    return r
})



console.log(newArr)

Now i get the wrong result, because one every iteration, the new array grow with a copy of the first array:

 const r = {
    ...arr,
    power:2
 }

How to get the next result?

{
  type:"Fiat", model:"500", color:"white", power: 2
},
{
  type:"ford", model:"5300", color:"gray", power: 2
}

Thomas · Accepted Answer · 2020-03-12 18:16:26Z

2

You are spreading arr .You need to spread i which is the object inside the array.

const arr = [
  {
    type:"Fiat", model:"500", color:"white"
  },
  {
    type:"ford", model:"5300", color:"gray"
  }
];
const newArr = arr.map(i => {
    const r = {
      ...i,
      power:2
    }
    return r;
})
console.log(newArr)

With array function you can implicitly

const arr = [
  {
    type:"Fiat", model:"500", color:"white"
  },
  {
    type:"ford", model:"5300", color:"gray"
  }
];
const newArr = arr.map(i => ({...i, power: 2}));
console.log(newArr)

edited Mar 12, 2020 at 18:16

Thomas

12.8k1 gold badge16 silver badges31 bronze badges

answered Mar 12, 2020 at 18:09

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

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

Comments

Muhammad Zeeshan · Accepted Answer · 2020-03-12 18:11:22Z

2

You need to spread the current object that you are getting as:

const newArr = arr.map(i => ({ ...i, power: 2 }));

answered Mar 12, 2020 at 18:11

Muhammad Zeeshan

4,7784 gold badges19 silver badges42 bronze badges

Comments

mikeb · Accepted Answer · 2020-03-12 18:09:46Z

1

You want to do this, you are spreading arr and should be spreading the array getting passed to map (e.g. i):

const newArr = arr.map(i => {
    const r = {
      ...i,
      power:2
    }
    return r
})

answered Mar 12, 2020 at 18:09

mikeb

11.5k9 gold badges73 silver badges135 bronze badges

Collectives™ on Stack Overflow

issue with spread operator in javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related