Wait, I think I’m starting to understand this. It has something to do with the values of the expressions. I think JavaScript’s logical operators might work at least something like Python’s. Don’t know if there’s a technical name for this, but here goes.
Logical And:
If the left expression is ‘truthy’, we just get the right side’s value. This makes sense.
True and true would give us true, since that’s what the right expression’s value was.
True and false would give us false for the same reason.
However, we can reuse this to our advantage. If we keep the left side as a boolean, then it acts sort of like a conditional whether or not to evaluate to the right side’s value.
But if the left expression is ‘falsy’, we get it. There’s no need to evaluate the right hand side. However, it doesn’t necessarily evaluate to false, just what the falsy value was.
False ad false would give us false.
False and true would still give us false.
0 and true would give us 0.
0 and false would still give us 0.
“” and ‘’ would result in “”.
I think the thing that’s a little weird is that the expression will evaluate to the value of the boolean (left side) if the boolean (again, the left side expression) is falsy. If I remember right, JSX only renders JSX elements, so the value is still there, we just never see it.
So that just answered my question about && and honestly I have to say it’s pretty cool but can end up being very confusing. I’m going to investigate || now.
Logical Or:
If the left side is true, we don’t need to check the right hand side (this is the flip case of &&), so we just get the left side’s value. This makes a lot of sense.
True or false should always give us true.
True or true should result in the same thing.
If the left expression is false, we get the right expression. This also makes sense.
False or true should give us true.
False or false would give us false. It works how you’d expect it to.
This (meaning the logical or trick) doesn’t seem as useful though. I guess you could make it a falsy checker? For example if you had a value x,
x || "Your value is falsy."
should work perfectly as a falsy value finder - as long as you have a human reading it.
I suppose you could also use:
!!x || "Your value is falsy."
This would get very confusing as if x is truthy you get true, but if it’s falsy you don’t get false but instead a string.
If you want to boolean-ify a value, check the logical not section.
Logical Not:
Well, there aren’t really any tricks here. It just makes a value become either true or false in both languages. If you want to check if it’s truthy or falsy, !!x
will give you true if x is truthy and false otherwise.
Logical XOR:
The best way I’ve seen of implementing this is x ? !y : y
which works very well for booleans.
True XOR false would give us not false: true.
True XOR true would give us not true: false.
False XOR false would give us false.
False XOR true would give us true.
Hmm, wait - after messing around in the console for a bit, I believe that the most useful use for this is just the opposite of logical and - an “unless” of sorts. The left side would be a boolean. If it ends up being false, the ternary operator will give us the value of the right side. However, it gets a bit messy. Let’s say you had:
(expression that is true) XOR 0
which would give us !0 - true. That’s kinda weird. And if we implemented something like this for JSX elements, it would probably give us false most of the time. Still, it wouldn’t render anything, and we’d be fine.
That pretty much wraps up my analysis. Very interesting use JavaScript logical operators. If this is something people actually use (not going to call it an “exploit”, because it really isn’t), then why wasn’t it explicitly stated in the JS course?
We’re taught what the logical operators theoretically do, but the actual way they execute varies from language to language and I think this should be taught so programmers can know what tools they could technically use in each situation.