Geek Answers Handbook

What...!! syntax in ES6?

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

I know that ... used as an object distribution. I know that !! used to convert something to logical with the same truth.

However, knowing this, what they mean when they are brought together, like ...!! ? I find it hard to understand the last line here:

 { ...resolveAction, ...isAction(rejected) ? rejected : { ...!!rejected && { payload: rejected } }
  • ...resolveAction simply spreads the resolveAction key.
  • ...isAction(rejected) ? checks if the rejected action allows, and then will distribute it. (Not sure about that).
  • add rejected to object if true
  • {...!!rejected && { payload: rejected } ??????????????????

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

  • If he first distributes the object, then !! will apply to all distribution keys

  • If !! applied first, this is a boolean, and it cannot be propagated.

So this makes no sense, or I'm missing something because, given this code, I assume it is trying to propagate a boolean value.

+6
source share
2 answers

So, after loading the npm module and passing the passed 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 true, then it will propagate the payload to the object. If it is not _extends({}, false) just returns {} .

The key to this work is that ... has lower priority than any other statement in the entire line. With this in mind, you can begin to understand this.

+3
source

Relevant Question What is "x && Foo ()"?

Strange syntax

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

analyzed as

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

Really !! distinguishes rejected from boolean, then it is evaluated by the object when it is right. The best way to write this would be

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

And, of course, the entire internal object literal is superfluous. It could just be

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

(leave parentheses if you want)

+1
source

More articles:


All Articles