This article is originally written here with images and code snippets -> https://easyontheweb.com/how-to-use-short-circuit-evaluation/
How to use short circuit evaluation, huh ? So after a bit of a hiatus for nearly 20 days I’m back into writing blog posts again and I thought of many different ideas to begin writing again but eventually settled down on something very beginner friendly and easy to understand if I may say because to be honest even I’m a bit rough on the edges and diving into a topic that was complex or difficult to write about would’ve been kind of pushing myself as well 😛
I remember being taught short circuit evaluations during my college days and on hearing the term I expected it to be something really fancy and overwhelming. Now, to be frank with you, it is nothing fancy, nothing overwhelming but extremely useful. I use it all the time, my colleagues over the years have been using it all the time and it’s like stupid not to use it. I mean why wouldn’t you ? It’s great.
In the simplest of terms (and I don’t know how to even say this in non-simple terms) short circuit expressions are the ones which stop in between as soon as their value becomes clear. They do not continue evaluation any further if they know what are they going to result into.
Before I tell you how to use short circuit evaluation let us take a quick small reminder on logical operators (in Javascript) by reading up on them here => https://www.w3schools.com/js/js_comparisons.asp
Understanding short circuit evaluation
So, as I mentioned earlier as well short circuiting means to stop the evaluation of an expression in between when it’s value becomes obvious.
This is done to utilise lesser computing power because the value would still remain the same even if the entire expression is computed till the end. Let us take this example and see what I mean.
true || false
This is an expression that is using two boolean values and a single logical operator OR (||). We know that OR returns true if one of the two values it is applied on is true. So, when a computer starts computation over this statement, what do you think happens ? Well, first it reads the value “true”, okay, done. Then it moves onto the || operator, okay, done as well. Now, think about it, does the computer actually even need to check what the second value is ? No, right ? Because the first value is already true. Therefore, the computer skips over seeing/evaluating the second value and as we say short-circuits the evaluation.
Now, this was just a simple example with two direct booleans but what if the second value was a very complex operation that say needed to fetch data from a database and run a mathematical calculation on that value ? Short circuiting is thus a very simple but powerful technique that certain programming languages leverage to save computing power.
Where and how to use short circuit evaluations
One of the most widely used places for short circuit evaluation expressions is in variable assignment based on some expression. This use case involves the same example as above with the || operator.
Another use case for short circuiting is in conditionals like if where we have multiple conditions to check inside the conditional. We might not want to even check for the other conditions if the first condition is met.
The third and my favourite method of usage is in libraries like React, where we use short circuiting to decide whether or not to actually render a component. Well, that might come in the if-else category but I’d like to keep it separate as I find it really cool.
Let’s see all three of them in action and figure out how do they work.
short circuit evaluation examples
Let us go through each of these examples one by one then. In the first example, the expression gets short-circuited at 4. Why ? Because it is the first value that Javascript considers as truthy. Rest all the values that we try to assign to f before that are falsy values in Javascript. But once Javascript hits d, ie, 4 – that value gets assigned to f and the system doesn’t even bother to check the value for e.
With the second example, it is pretty clear I guess, we run the first function foo, check it’s return value, if that is a truthy value the conditional will get short circuited , else we’ll move onto the next function call and so on and so on.. You probably get the idea now.
The third example is also the same and again, I’ve just included that to include it as trick if you do not use it as of now. This is a very cool trick that I started using after I initially used ternary operators and I used to return null in the else statement . Well, I still do use ternary operators when I need to render two different things based on the conditional. But whenever I have to return null in the else block, I mostly use short circuiting and render what needs to be rendered.
I hope this was an article where you got to learn something new and if not, your memory got refreshed on something and if even that did not happen xD, here is the link to my other Javascript articles that you’d might learn something from => https://easyontheweb.com/category/javascript/
Also, if you’d like to join me and some other web developers’ facebook group for discussions and articles, please join us here => https://www.facebook.com/groups/503230450489995
Top comments (0)