What is ...!! syntax in ES6?

Question

I was reading through this: https://github.com/pburtchaell/redux-promise-middleware/blob/master/src/index.js

I know that ... is being used as Object spread. I know that !! is used to convert anything into a boolean with the same truthiness.

However knowing this what do they mean when they're put together like ...!!? I have trouble understanding the last line here:

{
  ...resolveAction,
  ...isAction(rejected) ? rejected : {
    ...!!rejected && { payload: rejected }
}

1. ...resolveAction just spreads the keys of resolveAction.
2. ...isAction(rejected) ? will check if rejected resolves an action and then will spread it. (Not sure about this one either)
3. add rejected to object if true
4. {...!!rejected && { payload: rejected } ????????????????

How is ...!! even valid syntax? There are two options:

1. If it spreads the object first, then !! would be applied to all the spread keys

2. If !! is applied first it's a boolean value and it can't be spread.

So does it make no sense whatsoever, or am I missing something because given that code, I assume it's trying to spread a boolean value.

Answer 1

Okay so after downloading the npm module and going through the transpiled code I found the line:

return dispatch(isThunk(rejected) ? rejected.bind(null, resolveAction) : _extends({}, resolveAction, isAction(rejected) ? rejected : _extends({}, !!rejected && { payload: rejected })));

Of which the relevant part is here:

_extends({}, !!rejected && { payload: rejected })

Basically if !!rejected is true then it'll spread the payload into the object. If it's not _extends({}, false) just returns {}.

The key to this working is that ... has less precedence than any other operator in the entire line. With that in mind you can begin to make sense of it.

Answer 2

The relevant question is What is "x && foo()"?

The weird syntax

{...!!rejected && { payload: rejected }}

is parsed as

{ ... ((!!rejected) && { payload: rejected }) }

Indeed the !! does cast rejected to a boolean, then it is evaluated to the object when truthy. A better way to write this would be

{ ...(rejected ? {payload: rejected} : null) }

---

And of course the whole inner object literal is superfluous. It could just be

{
  ...resolveAction,
  ...(isAction(rejected) ? rejected : (rejected ? {payload: rejected} : null))
}

(omit parentheses as you see fit)