if...else statement, the
switch statement, and even the ternary operator. But it was a little while before I learned about short-circuit evaluation. Let’s dig into it!
Short-circuit evaluation is a way to take advantage of certain logical operators to make your code more efficient. As explained on the MDN Web Docs:
As logical expressions are evaluated left to right, they are tested for possible “short-circuit” evaluation using the following rules:
(some falsy expression) && expris short-circuit evaluated to the falsy expression;
(some truthy expression) || expris short-circuit evaluated to the truthy expression.
Short circuit means that the expr parts above are not evaluated, hence any side effects of doing so do not take effect (e.g., if expr is a function call, the calling never takes place). This happens because the value of the operator is already determined after the evaluation of the first operand.
Let’s look at a really common example, and then a more contrived one just to help further illustrate the point.
Default function parameters
Some programming languages allow you to define default parameters for your functions. They let you initialize parameters with default values if no value or
In the example above, I set the string
"Kieran" as the default value for the
name parameter. When I call the function without passing in an argument (meaning
"Kieran" is the value used.
If you wanted to support IE, you could use a transcompiler like Babel. I don’t like to complicate my process with tools like that, so I’d just use short-circuit evaluation. Here’s how I’d rewrite the previous example.
logName() function behaves in exactly the same way, now with IE support, thanks to the use of short-circuit evaluation. It works because, as explained above,
(some truthy expression) || expr is short-circuit evaluated to the truthy expression.
That is: if a non-empty string is passed in, the
name parameter becomes truthy, and so the rest of the statement is skipped.
If nothing is passed in, the
name parameter becomes
undefined, which is falsy. The value
"Kieran" gets used instead because it’s truthy.
Checking if an element exists before using it
When selecting an element from the DOM, it’s a good idea to make sure it actually exists before trying to use it. Otherwise, your script will throw a
TypeError. Here’s a simple example…
In the script above, I try to select a
sandwich element. This doesn’t exist in the DOM (it’s not a valid element name), so the
.querySelector() method returns
.textContent property is only available to the
Node interface, so trying to access it on
null returns the
To avoid this error, I’d usually wrap the reference to the
sandwich variable inside an
It’s worth knowing, though, that you can do this using short-circuit evaluation. You’ll often see it in code that’s been run through a minifier like Terser. Here’s what the previous example would look like:
Pretty cool, right? The value of the first operand is
null, which is falsy, so the rest is skipped and never runs. Note that the parentheses are necessary here, otherwise you’d get a
SyntaxError like so:
In practice, I would just use the
if statement because it’s more readable. But it’s useful to know about, and hopefully this extra example helps to illustrate how short-circuit evaluation works.
If you have questions, feedback, or any other suggestions, please do email me. I'd love to hear from you!