Not understanding payload in update action

Question

I am having trouble understanding in how will the payload look in the first action. Why in the first one there is { } and ... , what does that give? How do I pass data into it, when I call it from a component? In the second one, i would just pass an object, but I don't get the first one.

update({ id, ...rest }) {
    return http.patch(`/test/${id}`, rest);
  },

update(id, rest) {
    return http.patch(`/test/${id}`, rest);
  },

This is called [Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) — evolutionxbox, Feb 25 '21 at 10:54
This should help in understanding: https://stackoverflow.com/a/43767533/9779577 — Kunal Kukreja, Feb 25 '21 at 11:04
@FriedRiceEater no. It expects an object to be passed as the first argument. It ignores all other arguments. Then it assigns the object property `id` to a variable `id` and "gathers" the rest of the object properties into a variable called `rest`. `rest` will be an object. — evolutionxbox, Feb 25 '21 at 11:13
The second example uses two parameters. No destructuring, no rest, nothing special. — evolutionxbox, Feb 25 '21 at 11:14

score 1 · Accepted Answer · answered Feb 25 '21 at 12:49

call update like this.

update({
  id: 123,

  // other  property
  name: 'your name',
  tel: 'your tel'
})

in update, idis123, and rest is {name: 'your name',tel: 'your tel'}

function update ({ id, ...rest }) {
    console.log('id is:', id);
    console.log('rest is:', rest);
}
    
update({
    id: 123,
    
    // other  property
    name: 'your name',
    tel: 'your tel'
});

Not understanding payload in update action

1 Answers1