Conditional blocks are an integral part of any programming language. The same goes for JavaScript. As beginners, we are taught to either use if-else blocks or switch-case statements to control the flow of our program. As we move ahead we encounter ternary operators which can be used in place of single if-else blocks to write cleaner code. But when the code doesn’t require an else block using a ternary kind of becomes redundant and the concept of DRY(Don’t Repeat Yourself) kicks in.

This is where short-circuiting comes in. Short-circuiting is basically using logical operators to write flow control logic or render things conditionally.

Logical Operators

Logical Operators are used for connecting two expressions and return true or false depending on the expression. The logical operators we are interested in for short-circuiting purposes are && and || (pipe symbol above the Enter key). These operations come from Boolean algebra will help us understand why short-circuiting works the way it does.

&& - The logical AND operator

The behavior of an AND operator is shown in below truth table:

For our purposes, 0 is false and 1 is true. If we look closely at the first two rows we can see that AND doesn’t really care whether the second input is true or false if the first input is false and the output becomes false. For better understanding, we can condense the above table as follows:

Here “X” denotes that AND doesn’t care about the input value so we don’t as well. Hence, if Input1 is falsy we don’t need to check the second and can immediately say that the output will be false. However, if Input1 is true then we need to check the Input2 to decide what the output of our AND operation will be. This same logic is used in JavaScript (and other programming languages) to assign values conditionally using lesser code.

let allowLogin = userExists && passwordIsCorrect

In the above code snippet, the passwordIsCorrect will only be checked if the userExists variable has a truthy value. If userExists has a falsy value, allowLogin will simply be assigned false because the value of passwordIsCorrect doesn't matter anymore.

|| - The logical OR operator

The behavior of an OR operator is shown in below truth table:

For our purposes, 0 is false and 1 is true. If we look closely at the first two rows we can see that OR doesn’t really care whether the second input is true or false if the first input is true and the output becomes true. For better understanding, we can condense the above table as follows:

Here “X” denotes that OR doesn’t care about the input value so we don’t as well. Hence, if Input1 is truthy we don’t need to check Input2 and can immediately say that the output will be true. However, if Input1 is falsy then we need to check the Input2 to decide what the output of our OR operation will be. This same logic is used in JavaScript (and other programming languages) to assign values conditionally using lesser code.

let displayName = userName || "guest"

In the above code snippet, the displayName will be assigned the value of "guest" if the userName variable has a falsy value. If userName has a truthy value, displayName will simply be assigned the value of userName.