JavaScript Short Circuiting

Today, I'll be discussing the unorthodox and not so familiar JavaScript idiom called Short Circuit (&& and ||). As developers, most of us have been taught on the popular use of the Logical AND and OR operators since our college days. Some might even learned it at the age of three!

Back to Basics

We need to revisit the basic usage of these operators before tackling short-circuiting in JavaScript. For additional information regarding JavaScript Logical AND and OR operators, Please visit the following links:

• W3 Schools
• Mozilla Documentation

Logical AND Operator (&&)

The AND operator (&&) is used to evaluate if both of its operands are true. If both of its operands are true, then it returns true. Otherwise, then it returns false.

Example

        var x = 1,
            y = 2;

        console.log(x == 1 && y == 2);//returns true
        console.log(x == 3 && y == 2);//returns false
        console.log(x == 1 && y == 3);//returns false
        console.log(x == 2 && y == 3);//returns false

Logical OR Operator (||)

The OR operator (&&) is used to evaluate if any of its operands are true. If any of its operands is true, then it returns true. If none of its operands are true, then it returns false.

Example

        var x = 1,
            y = 2;

        console.log(x == 1 || y == 2);//returns true
        console.log(x == 1 || y == 3);//returns true
        console.log(x == 2 || y == 2);//returns true
        console.log(x == 3 || x == 4);//returns false

---

Short Circuiting

In JavaScript, the && (AND) and || (OR) operators behave in an unorthodox way that some developers may not expect. First, they short-circuit evaluations and secondly they return the last evaluate value (not necessarily true or false).

Short-circuiting is a way for the JavaScript engine to increase performance.

With && (AND), when the first operand evaluates to false, then the second operand will not be executed/evaluated because the result will always be false. If none of the operands evaluate to false, it returns the last evaluated expression.

This behavior also applies with the || (OR) operator.

When the first operand evaluates to true, the second operand is not executed/evaluated because the result will always be true.

---

Short Circuiting in Action

Enough theory and let's view some short circuiting examples for JavaScript.

&& (AND) Example

    <script type="text/javascript">
        var x = 1,
            y = 2;
        
        console.log(1 === 1 && (x + y));//This will print 3
        console.log(1 === 2 && (x + y));//This will print false
    </script>

In the first example above, since 1 === 1 evaluates to true, the && operator evaluates the proceeding expression (x + y) and returns the value of the expression which is 3.

In the second example, since 1 === 2 evaluates to false, the && operator returns false since the expression cannot evaluate to true anymore.

|| (OR) Example

    <script type="text/javascript">
        var x = 1,
            y = 2;

        console.log(1 === 1 || (x + y));//This will print true
        console.log(1 === 2 || (x + y));//This will print 3
    </script>

In the first example above, since 1 === 1 evaluates to true, the || operator stops evaluating the expression and returns the value of the first operand (true in this case).

In the second example above, since 1 === 2 evaluates to false, the || operator evaluates the proceeding expression (x + y) and returns the value of the last operand which is 3 in this case.