Javascript Spread Operator used with return

Question

I'm confused on how the spread operator is being used here. I have a basic understanding of how the spread operator works but I'm confused on what the spread operators are referring to, how it is being used, and what it is offering. The "userCanDecline" const is a boolean retrieved from an above call. Please let me know if I can provide any more information about what I've shared.

return [
                ...(userCanDecline
                    ? [
                          {
                              label: 'Decline Draw',
                              icon: 'ban',
                              action: () => (el, ev) => {
                                  Service.decline(this.onCloseView);
                              },
                          },
                      ]
                    : [])

really no reason for it. should have just been written as `return userCanDecline ? [{}] : [];` — epascarello, Nov 18 '21 at 20:33
There is no spread *operator*, there is [spread *syntax*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax). — RobG, Nov 18 '21 at 20:36
You have a return statement that returns an array. Then the spread syntax inside of it allows you to perform a check, if `userCanDecline` evaluates to true, it returns another array of objects, otherwise it returns an empty array. The `?` and `:` is called conditional (ternary) operator. Also the wrapping parenthesis around `(userCanDecline.....)` aren't necessary. — decho, Nov 18 '21 at 20:39
The spread syntax is simply making a copy of the array returned by the conditional operator. But there's no need to make a copy of a freshly created array. — Barmar, Nov 18 '21 at 20:40
I'd say that this code was written by someone who didn't really know what he was doing. It's not a good example of anything. — Barmar, Nov 18 '21 at 20:41
If i remove what was stated above and remove the "..." then it returns with missing data and the html file that is using this JS file doesn't populate with the icon, label, or action. Not sure if including that information would change what any of you have had to say? — Max Taylor-Hayden, Nov 18 '21 at 21:31

Maye Edwin · Accepted Answer · 2022-03-19T20:41:00.753

1

Spread syntax can be used when all elements from an object or array need to be included in a list of some kind.

let arr1 = [0, 1, 2];
const arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];

In your question, what's happening is that, userCanDeclined is checked if its value is true, if so, return an array in which the array below is spread(its values copied into the new returned array)

 [
  { 
    label: 'Decline Draw',
    icon: 'ban',
    action: () => (el, ev) => {
           Service.decline(this.onCloseView);
        },
   }
  ]

Else, spread or copy an empty array if false

[]

edited Mar 19 '22 at 20:41

answered Nov 18 '21 at 21:04

Maye Edwin

49
5

This answer makes more sense than the comments left on the post. I'm not saying they're wrong, but after playing around with removing the "..." and some other syntax they suggested, the file isn't returning what's expected. – Max Taylor-Hayden Nov 18 '21 at 21:33
Glad it made sense @MaxTaylor-Hayden – Maye Edwin Mar 19 '22 at 20:41

Javascript Spread Operator used with return

1 Answers1