AR7 AR7 - 3 months ago 10
Javascript Question

What is ...!! syntax in ES6?

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.

AR7 AR7
Answer

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.