Java Script - Short-Circuit Evaluation


Conditionals


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 this.state.data could prevent our app from running. To get around this, we could wrap it in a conditional:


if (this.state.data) {

  return this.state.data;

} else {

  return 'Fetching Data';

}


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


return (this.state.data || 'Fetching Data');


We can't refactor the code above to use && . The statement 'Fetching Data' && this.state.data will return this.state.data 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 this.state.data?.() , 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