CODEWITHSUNDEEP
javascriptecmascript-6
Vincent Law
Vincent Law

Reputation: 95

Can someone explain this es6 syntax to me?

Can someone explain the following statement?

  return state.map(todo =>
    (todo.id === action.id)
      ? {...todo, completed: !todo.completed}
      : todo
  )

More specifically this line

{...todo, completed: !todo.completed}

Why is there two arguments in the true portion of the ternary operation?

What is ?

...

Upvotes: 0

Views: 59

Answers (2)

Amardeep Bhowmick
Amardeep Bhowmick

Reputation: 16908

The ...todo, is the spread syntax, meaning the completed: !todo.completed property will be added to the existing todo object along with the previous properties. Using it you don't have to manually copy over the existing properties.

Treat it as expanding the 'todo' object.

Also (todo.id === action.id) is checking whether the idis same in both objects and then adding the completed: !todo.completed property else keeping the old object as it is.

Please check out this reference guide:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Upvotes: 4

robbie
robbie

Reputation: 1319

{
  ...todo,
  completed: !todo.completed
}

is simply making a copy of todo but with a new completed property. In this case, it's equivalent to the inverse of todo's completed property. It is a plain JS Object.

Upvotes: 2

Related Questions