JavaScript’s Logical Operators

Most people that have written JavaScript realize that the and operator is && and the or operator is ||. Did you know, though, that these operators are short-circuit operators? Did you know that these operators don’t make the expression evaluate to a boolean per se?

Short-Circuit Operators

When someone says that a device is good enough if it matches up to multiple criteria, in reality, as soon as one criterion is given that the device doesn’t match up to, you know the device isn’t good enough right? The same holds true when programming in JavaScript. Let’s take the following for example:

// Criteria for the ideal phone:
var co = "Verizon";  // phone manufacturer
var age = 0.5;  // phone age
var smartPhone = true;  // indicates if is a smart phone

// The following function will throw an error if called.
function blowUp() {
  throw new Error("I am tired of processing data.");
}

// Indicates that whether or not the phone matches your criteria.
var goodEnough = co == "Verizon" && age < 0.5 && smartPhone;

// Indicates whether or not the phone is good enough and blowUp() returns true.
var proof = goodEnough && blowUp();

// Show the values if we made it this far.
alert("goodEnough = " + goodEnough + "\nproof = " + proof);

Looking through the above code, you will notice that a few details about a phone are given. Next, you can see a function is defined which always throws an error. After that, you will notice that goodEnough will be the result of making sure that the phone matches the criteria. Finally you will notice that proof indicates whether or not the phone is good enough and blowUp() returns true.

As you have probably already guessed, goodEnough will evaluate to false because the age is not less than 0.5. The fact that the and operator is a short-circuit operator means that as soon as JavaScript saw that the age was not less than 0.5, it assigned false to goodEnough and didn’t check the value of smartPhone. To prove that as soon as the first thing that evaluates to false is found makes the entire expression of &&’s evaluate to false I used proof. If it wasn’t a short-circuit operator, blowUp() would run and proof would not evaluate because of the error being thrown. Since it is a short-circuit operator, false is assigned to proof and the alert is shown.

The or operator is also a short-circuit operator. As we saw with an expression of multiple and operators, as soon as the first part that evaluates to false is encountered, the rest of the expression is ignored. For an expression of multiple or operators, as soon as the first part that evaluates to true is encountered, the rest of the expression is ignored.

Not Always Booleans

Believe it or not, the following code will not evaluate to two booleans:

var noBool = "John" && 0 && true;
var noBool2 = "John" && 10 && "West";

Let’s use the alert() function to prove this. Copy and paste the following into the address bar and then press the enter key on your keyboard:

javascript:alert("John" && 0 && true); alert("John" && 10 && "West")

You will notice that using an expression full of and operators will result in either the first part that evaluates to false or the last part of the entire expression.

Now check out the following code which uses or operators:

var noBool = undefined || "Chris" || false;
var noBool2 = 0 || false || null;

Let’s use the alert() function to see the result of the above non-boolean variables:

javascript:alert(undefined || "Chris" || false); alert(0 || false || null)

Using an expression full of or operators will result in either the first part that evaluates to true or the last part of the entire expression.