JavaScript — Short Circuit Evaluation

Learn Short Circuit ‘||’ Evaluation in three minutes

Brandon Morelli

Published in

codeburst

3 min readNov 28, 2017

This is part two in a two part series this week:

Short Circuit Conditionals with &&
Short Circuit Evaluation with ||

Logical OR

In JavaScript, the logical OR operator will return true if at least one operand is true. It returns false in any other scenario. Here are a few simple examples:

true || true;
// truetrue || false;
// truefalse || false;
// false

There are two important aspects of logical operators inJavaScript that you should know:

They evaluate from left to right
They short-circuit

When working with logical OR, if the first operand in the equation is true, the equation will short circuit and the second operand is ignored completely. In other words, the second operand in an OR equation is only evaluated if the first operand is false.

Using Short Circuiting To Our Advantage

Consider the below code. We have an object named cat with some properties associated with it:

let cat = {
  name: 'Whiskers',
  color: ['black', 'grey']
}

We can tell from our code that our cat is named Whiskers and s/he is black and grey. We can’t tell how old Whiskers is though, because there is no age property associated with Whiskers.

Here’s what would happen if we tried to log out Whiskers age:

console.log( cat.age );// undefined

We get undefined because the age property doesn’t exist. We can instead use short-circuit evaluation to log unknown to the screen when the age property is omitted:

console.log( cat.age || 'unknown' );
// unknown

What we’ve done above is log the value of cat.age OR the default value of ‘unknown’. Since our cat.age value doesn’t exist, it is undefined. And because undefined is a falsy value, JavaScript will instead go to the other side of our OR equation and accept whatever value is there.

We can make this clearer by looking at an example which includes an age property as well:

let cat = {
  name: 'Whiskers',
  color: ['black', 'grey']
}let dog = {
  name: 'Mocha',
  color: ['brown', 'white'],
  age: 7
}

Now when we run our log:

console.log( cat.age || 'unknown' );
// unknownconsole.log( dog.age || 'unknown' );
// 7

We get the same result for cat, but for dog we get 7! The value of dog.age short circuits the equation and is logged out. The value of unknown is never evaluated in this instance.

Need a refresher on falsy values in JavaScript? Read JavaScript Showdown

A Popular Example

Below is a popular snippet of code from stack overflow that illustrates short circuit evaluation:

let a;
let b = null;
let c = undefined;
let d = 4;
let e = 'five';let f = a || b || c || d || e;console.log(f);

Look at the code above and think about what will be logged to the console. When you have a guess, scroll down for the answer.

Answer

Lets break down the code:

let a;               // undefined  (falsy value)
let b = null;        // null       (falsy value)
let c = undefined;   // undefined  (falsy value)
let d = 4;           // number     (truthy value)
let e = 'five';      // short circuits before reaching herelet f = a || b || c || d || e;

a, b, c, all are assigned falsy values. Remember, when logical OR sees a falsy value, it continues evaluating. Once it reaches variable d with a value of 4 (truthy), the equation short-circuits and the value of 4 is saved to variable f. Variable e is never considered.

console.log(f);
// 4

Closing Notes:

Thanks for reading, and hopefully this was helpful! If you’re ready to finally learn Web Development, check out The Ultimate Guide to Learning Full Stack Web Development in 6 months.

I publish 4 articles on web development each week. Please consider entering your email here if you’d like to be added to my once-weekly email list, or follow me on Twitter.