No understanding || (OR) in this case

I am reviewing JS basics, now on this page:

I don’t understand the following lesson. It seems to me that the first alert would be shown and not the second, but the second alert fires.

2. Short-circuit evaluation.

Another feature of OR || operator is the so-called “short-circuit” evaluation.

It means that || processes its arguments until the first truthy value is reached, and then the value is returned immediately, without even touching the other argument.

The importance of this feature becomes obvious if an operand isn’t just a value, but an expression with a side effect, such as a variable assignment or a function call.

In the example below, only the second message is printed:

true || alert("not printed");
false || alert("printed");

In the first line, the OR || operator stops the evaluation immediately upon seeing true, so the alert isn’t run.

Why doesn’t the first alert fire?

Farther down the page, for && (AND), it says:
“The rules above are similar to OR. The difference is that AND returns the first falsy value while OR returns the first truthy one.”

Because of the way using just true works.

If written out, that code becomes

if (true) {
   // do something
} else {
   alert("not printed");
}
if (false) {
   // do something
} else {
   alert("printed");
}

if (true) is one of those idioms which fires across ALL languages as code that will ALWAYS run. I’ve always thought it odd because why wrap it in code, but it’s there.

There’s something similar in SQL, but the pattern there is usually 1 = 1 (i.e. WHEN 1 = 1) and is used when building dynamic SQL so you don’t need to figure out if you need to use WHEN or AND.

So since the true will always fire, it won’t hit the part after the pipe since it’s the OR. But since if (false) will never fire (because true is always true), the OR portion of that line runs.

2 Likes

Oh, now I understand. If true, do something; otherwise, show alert. Got it.

Close…

If true, do NOTHING, otherwise show alert.

Another way this could have been written (which might make it a little clearer) is

if (!true) {
   alert("not printed");
}
if (!false) {
   alert("printed");
}

This is why I’m of the opinion that shorter is not always better. Code that is readable is maintainable, and sometimes that means a few extra keystrokes.

1 Like

I see it this way:
true || alert means:
It’s evaluated as True, so the code stops. It doesn’t run the alert. That’s what OR means; do one OR the other. Choose the first truthy statement.

1 Like

Correct, it’s just that whomever came up with this pattern mixed their metaphors, which can lead to bad ju ju waaaaaaaaaaaay too easy… ORs as applied in this pattern are typically condition checks, not actions.

This usage of it makes sense (from same link). Taking actions on shorthand just doesn’t seem like a good idea…

1 Like

This principle is known as lazy evaluation. It’s lazy because it tries to do as little as possible.

Let’s take the case of A || B and let’s see the truth table for that:

A B A || B
T T T
T F T
F T T
F F F

(T = true, F = false)

What you can see here is that as soon as A is true, the value of B doesn’t matter; whether B is true or false, the result of A || B will be true. Therefore, as soon as javascript has determined that A is true, it already knows the entire result is true, regardless of B, so it safes itself some time by not checking it at all (i.e. it’s being lazy).

This is why order matters somewhat when doing ||, you’d always want to check cheap operations (simple arithmatic for example) before checking more expensive operations (database, network, disk read, etc)

if (someSimpleCheck() || someExpensiveCheck()) 

if the simple check returns true, the expensive check will be skipped completely, which can be nice in terms of performance.

For && it’s similar, except that it stops when one of the terms if false, as there is nothing that can be && with false to make it true.

For completeness sake, here is the truth table for A && B

A B A && B
T T T
T F F
F T F
F F F

As you can see, A && B is only true when both A and B are true, so like if || if we know that A is false we don’t need to bother checking B because we know A && B will be false regardless of B’s value.

3 Likes

For those that dont like the term “lazy”, you will also see this called short-circuiting. When A evaluates to true, the OR check short-circuits and outputs True without checking B.

1 Like