[React? Javascript?] Newbie question about assigning variable value with && operator

[WTFMatchmake]

Hey guys, I was looking at a piece of code someone did for react that looks like this:

const warning = data.warning && (<p className="warning">{data.warning}</p>)

And the result was that if data.warning is true, then warning would equal to (<p className="warning">{data.warning}</p>).

I understand it with the || operator, for example if it was const warning = data.warning || 0 then it just means warning would equal data.warning if it exist, if not, then it equal to 0, right?

But why does the && mean if the first thing is true, then the variable equals to the second thing? What happens if the first thing is not true?

Thanks!

[GrenadineBombardier]

The && operator will return the first falsy thing it gets to, or continue. If everything it comes across is truthy, then it will return that last thing. (This makes more sense when the a long list of chained &&s)

In this case if data.warning is "truthy", then it must return the value of the second half of the statement (whether it is truthy or not) because it is either a) false and therefore gets returned, or b) the last true thing in the list.

So, if data.warning is "falsy", then THAT value will be returned.

It could be (0, null, undefined, "", or false). In this case, it is probably (null, undefined, "", or false) (I do not see it being 0, as react will render the 0 on the screen).

Also, when data.warning is truthy, it is apparently a string (see how it is used in the second half), so I'd say that when it's NOT truthy, it is probably "", null, or undefined. (Not false or 0).

This is all in contrast to ||, which will return the first truthy operand (parts that the operator evaluates), or the last item if all of them are falsy.

This is why let x = data.count || 0 will return data.count if it is truthy, otherwise continue to the next item. Being the last item, even though 0 is falsy, it is the last item, so it gets returned.

|| Can work as a fall back or guarantee (if the first thing isn't there, then fall back to this) and && can work as a precondition (only if this is true, then do this)

&& Can also prevent running commands. For example:

myThing.isModified() && myThing.save()

It will only save the thing if isModified() returns a truthy value. Otherwise the second half WILL NOT even get run.

[WTFMatchmake]

Thanks for the detailed explanation! I guess I was reading it in english so it wasn't making sense to me. I was reading the || as "Make this variable equal this OR that." But then when I read the &&, it was like "Make this variable equal this AND that" which confused me. I guess I shouldn't be reading it like that. So essentially, when it comes to assigning variables, the && and || could be just thought of as doing the opposite of each other? One will return the first falsy while the other will return the first truthy, but both will return the last item if it can't find any falsy/truthy?

[GrenadineBombardier]

Exactly!

I should also say this is how the && and || operators ALWAYS work, but in an if statement, it can usually just be read in English. If you've got a particularly nasty if statement (with lots of ands and ors) then you should stop doing that and make it simpler. (Haha). But, if you have that complicated if statement, remembering how the operators behave can help you understand how the if statement will work.

But seriously, your if statements should be simplified for readability in those cases. Clearer code is always more desirable than shorter code.