Java Script - Short-Circuit Evaluation


The ternary operator is a quick way to write simple (and sometimes not-so-simple) conditional statements, like these:

p>x > 100 ? 'Above 100' : 'Below 100';

x > 100 ? (x > 200 ? 'Above 200' : 'Between 100-200') : 'Below 100';

But sometimes even the ternary operator is more complicated than necessary. Instead, we can use the 'and' && and 'or' || logical operators to evaluate certain expressions in an even more concise way. This is often called 'short-circuiting evaluation'.

How It Works

Let's say we want to return just one of two or more options.

Using && will return the first false or 'falsy' value. If every operand evaluates to true , the last evaluated expression will be returned.

let one = 1, two = 2, three = 3;

console.log(one && two && three); // Result: 3


console.log(0 && null); // Result: 0

Using || will return the first true or 'truthy' value. If every operand evaluates to false , the last evaluated expression will be returned.

Example 1

Let's say we want to return the length of a variable, but we don't know the variable type.

We could use an if/else statement to check that foo is an acceptable type, but this could get pretty longwinded. Short circuit evaluation allows us to do this instead:

return (foo || []).length;

If the variable foo is truthy, it will be returned. Otherwise, the length of the empty array will be returned: 0 .

Example 2

Have you ever had problems accessing a nested object property? You might not know if the object or one of the sub-properties exists, and this can cause frustrating errors.

Let's say we wanted to access a property called data within this.state , but data is undefined until our program has successfully returned a fetch request.

Depending on where we use it, calling could prevent our app from running. To get around this, we could wrap it in a conditional:

if ( {


} else {

  return 'Fetching Data';


But that seems pretty repetitive. The 'or' operator provides a more concise solution:

return ( || 'Fetching Data');

We can't refactor the code above to use && . The statement 'Fetching Data' && will return whether it is undefined or not. This is because 'Fetching Data' is 'truthy', and so the && will always pass over it when it is listed first.

A New Proposed Feature: Optional Chaining

There is currently a proposal to allow 'optional chaining' when attempting to return a property deep in a tree-like structure. Under the proposal, the question mark symbol ? could be used to extract a property if it is not null .

For example, we could refactor our example above to , thus only returning data if it is not null .

Or, if we were mainly concerned about whether state was defined or not, we could return this.state?.data .

The proposal is currently at Stage 1, as an experimental feature. You can read about it here, and you can use in your JavaScript now via Babel, by adding @babel/plugin-proposal-optional-chaining to your .babelrc file.

Go back