Web Dev Simplified Blog

What Is Short Circuiting?

October 07, 2019

I want to talk about short circuiting in programming. It is something that doesn’t really get talked about much, but is incredibly important to understand. Before I jump any further into why it is important, I need to define what short circuiting is.

What Is Short Circuiting Circuiting?

Short circuiting is a technique that many programming languages use when evaluating boolean logic (&&, ||) to save computing power by skipping unnecessary parts of boolean logic. This is a pretty vague definition, so in order to explain exactly what short circuiting is I want to give some examples. Imagine you have some boolean logic in your code that looks like this true || false . We know that by looking at this the result will be true, but a computer needs to take the execution of this statement piece by piece. This means the computer will look at the first part of the statement which is true then the second part which is || and then finally the last section which is false. The first part is easy for the computer since it just sees that it is true and it can move onto the second part which is ||. This is where the computer does something smart and actually short circuits out of the boolean logic. The computer knows that true || anything is always true, and thus it will skip checking the third part of our statement since it knows that no matter what the third part is the result is true. This works the same way with && as well. For example a computer knows that false && anything is always false so in a statement like this false && true the computer will skip the third part since it already knows the answer is false.

Why Use Short Circuiting?

Now from these examples you are probably thinking this is pretty pointless, but short circuiting allows you to do some really nifty conditional logic. If you have ever worked with React you have probably seen code like this isLoaded && renderContent() . I have used code like this many times in my YouTube videos and React course, because it allows us to render content conditionally without having to use an if statement. If we break this code down further we can see that if isLoaded is false then the computer will skip the last part and never call renderContent() since it knows that false && anything is false. Essentially this code is exactly the same as if (isLoaded) renderContent(), but it is more concise.

React is not the only use case for short circuiting, though. Another, even more common, use case is when you want to assign a default value to a variable. This can be done by doing this const variable = variableValue || 'default' . This code will assign variable to variableValue if it exists or if variableValue does not exist it will set it to 'default'. This again works via short circuiting since the computer will look at the first section variableValue and if it is something that evaluates to true, such as an object, then the computer will skip the 'default' section of the boolean logic. If variableValue evaluates to false, though, the computer cannot skip anything and it will thus set the variable to 'default'. This is essentially the same as the following code.

let variable = 'default'
if (variableValue) variable = variableValue

While these are the most common use cases of short circuiting it is by no means the full list. There are tons of use cases for short circuiting as a way to make your code cleaner and easier to write, but they all revolve around the concepts of the two examples in this email.


Kyle Cook

The official Web Dev Simplified blog by Kyle Cook.

Short and simple articles on web development.