How short-circuit evaluation works

What are truthy and falsy values?

It should be common knowledge that JavaScript has Booleans, which can either be true or false. Truthy and falsy values are similar; falsy values are values that are not false but become false when converted into a Boolean. JavaScript has 5 falsy values:

• 0
• " "
• undefined
• null
• NaN

...on the other hand, truthy values are values that are not true but become true when converted, for example...

• Any number that is not 0.
• Any string that is not empty.

...simple enough, right?

Converting truthy and falsy values

In actual practice, truthy and falsy values will be implicitly converted to a Boolean, meaning type coercion is automatically done in the background. JavaScript executes type coercion on Booleans under the following circumstances:

• When using logical operators.
• In a logical context, for example, when using an if/else statement.

Here's an example of type coercion in an if/else statement:

const friendGreeted = "Hello!";

if (friendGreeted) {
  console.log("Friend was polite and greeted.");
} else {
  console.log("Friend was rude and ignored.");
}

// Friend was polite and greeted.
        

...friendsGreeted is a truthy value, so it's implicitly converted to true, executing the first statement. If friendsGreeted was an empty string, it would be a falsy value and execute the second statement instead.

Explicitly converting truthy and falsy values is simple... there's two ways — either through the Boolean() function or through the double bang (!!) operator:

Boolean(0) // false
!!0 // false

Boolean(undefined) // false
!!undefined // false

Boolean("John") // true
!!"John" // true

Boolean(6) // true
!!6 // true
        

...which one you decide to use is simply a matter of preference. Personally, I like to use !! because it looks a lot cleaner.

Logical operators and short-circuit evaluation

JavaScript has 4 logical operators, but in this lesson we'll only be looking at two:

• OR (||) operator
• AND (&&) operator

...logical operators evaluate from left to right. Additionally, they can use any data type, return any data type, and most importantly, they perform short-circuiting, also called "short-circuit evaluation".

Short-circuit evaluation means that when a OR (||) expression is being evaluated, JavaScript will stop further evaluation as soon as the first TRUTHY operand is found. On the other hand, when a AND (&&) expression is being evaluated, JavaScript will stop further evaluation as soon as the first FALSY operand is found.

OR operator

console.log("" || "John"); // John
console.log(true || 0); // true
console.log(undefined || null); // null
        

...the first statement outputs John because "" is a falsy value, so JavaScript moves on and evaluates the second operand, which is truthy. In the second statement, true is already a truthy value, so it's immediately returned — JavaScript doesn't bother checking 0. In the last statement, undefined is a falsy value, so JavaScript moves on and returns null, even though it's also a falsy value.

Here's an example of short-circuit evaluation using multiple operands:

console.log(undefined || 0 || "" || "John" || 23 || null));
// John
        

...John is returned because it's the first truthy value in this chain of operations. John short-circuits the rest of the evaluation, so JavaScript doesn't bother evaluating 23 or null.

AND operator

Unlike the OR (||) operator, the AND (&&) operator works in the exact opposite way: it short-circuits as soon as the first falsy operand is found, like so:

console.log(0 && "John"); // 0
console.log(7 && "John"); // John
        

...in the first statement, 0 is a falsy value, so it's immediately returned and JavaScript doesn't bother checking John. In the second statement, 7 is a truthy value, so the evaluation continues to the next operand, John, which is also a truthy value; it's the last operand in the chain of operations though, so it's returned anyways. Here's an example with multiple operands...

console.log("Hello" && 23 && null && "John");
// null
        

...null is the first falsy operand in this chain of operation, so it's immediately returned.

To summarize, the OR (||) operator will return the first truthy value, or the last value if all the operands are falsy; the AND (&&) operator will return the first falsy value, or the last value if all the operands are truthy.