Spread operator error in return value, parse error

Question

When trying to directly return an item that contains the spread operator I get a parse error. If I assign it to an object before returning it there is no parse error. I'd like to know why.

When I saw the parse error point to the spread operator my first suspicion was not having ES2018 but through some experimentation I found the spread operator is working.

First WorkoutSets are defined as such. workoutSets: [ { id: 0, group: 0, repeat: 0, dist: 25, rest: 20, speed: "Easy", total: 0, notes: "" } ]

This shows a parsing error point at ... this.state.workoutSets.map( item => { ...item, repeat: e.target.value } )})

This succeeds: this.state.workoutSets.map( item => item = { ...item, repeat: e.target.value } )})

This also succeeds: this.state.workoutSets.map( item => item.group === 0 ? { ...item, repeat: e.target.value} : item)})

I'm just curious why the first example fails.

Answer 1

I guess that in your first try you open brackets {} so javascript thought it was a code block and in code block . was parsed as either 'decimal' or 'object instance property accessor'.

So if you want to do the code with the first style you would do something like

set.map(item => {return{...item, foo: 'bar'}})

And yes, you will need two pair of brackets with return

In the other 2 tries you started with assignment so js understood that you was returning the value.

Answer 2

the map function need to return a value for each element is the WorkoutSets array, the first example fails because you just did an assignement and you don't return anything. on the other hand, the second and third examples succeded because you returned item

Answer 3

You have a parsing error because javascript perceives the brakets {} after an arrow => as a body of the function. Not as a returning object.

item =>  { ...item, repeat: e.target.value } 

You can think about this part of code as

function (item) {
  ...item
  repeat: e.target.value
}

This code is not correct.

So if you need to return an object in an arrow function, you need to wrap it in a parentheses ():

item => ({ ...item, repeat: e.target.value })