A Neat Example of Using Javascript Short-Circuiting to Cut Some Lines of Code

While working through javascript, you’ll coming across a lot of situation where you will need to add some if statements and conditionals which will decide what type of expression you will run or what deciding what function to run. After working on some bigger projects &labs, you’ll find that your program will have a bunch of lines that you may not need. Though the conditions are unique, you’ll find you are kind of repeating yourself in a way. There is a way you can bring the number lines of code down a bit and it is using something called Short-Circuiting. If done responsibly and clearly, you’ll find that you can make it scaleable and still in 1 line.

There are 2 concepts/truths you need to understand before trying to take advantage of this ability.

When Javascript sees a condition, it is will actually execute what is inside the condition and see if the return value is truthy or falsey.

Short-circuiting (in programming) is that when a && or a || condition is applied, the system will test the first condition and see if it evaluates to a true or false before going in and evaluation the second condition.

Now typically, something like this shouldn’t matter so much. You have an && it checks the beginning and the end, if they are both true, it returns true. But it is the first part that makes it VERY interesting. if you give a basic equation of 2+2, it will add those 2 things together, get the answer 4 which Javascript will see as truthy. The core idea behind this what if we passed a function as a evaluation instead.

Lets say we had an event listener that depended on pressing down a button, a basic one where it will display to the console whatever button was pressed

Now we some if statements, but it becomes a bit tougher to scale up or down if we wanted to have more options, we’d ultimately need to keep adding if statements for every key which will make the code very long. Becase we know after pressing “keydown” on an event listener will make the button.key = “ArrowDown”, we can do something cute like make an object above and have it call the functions there as follows

By declaring an object above, and making it call the functions based on what is pressed, we can save a lot of lines of code by using this. Doing it above, you are currently getting whatever the value is. You can turn it into a function just by adding () right after and it will invoke the method. But now an issue comes up, if the key (in this case, the event listener) does not exist in the object, you will get an error because a function does not exist.

There would be 2 ways to solve this issue. One would be to create an if statement to see if the object exists. But if you use an if statement, it kind of defeats the purpose of removing the original ones. The other option you can do is to take advantage of short-circuiting which we mentioned above.

By writing the lines as such, 4 things are technically happening

1) The program is executing keyOptions[button.key]
2) The program is seeing if what keyOptions[button.key] returns is truthy or not
3) If it determines that the result is truthy, it will execute keyOptions[button.key]() .
4) It will return overall whether the last executed condition in the && is true or not

Because we are not running some kind of if statement, the 4th thing happening above does not matter, but everything else makes this line of code very interesting. By doing this, we are basically seeing if the button pressed down is in our keyOptions object (hence we have a function associated with it). If it is not present in our object, it will return undefined (which is falsey) and not execute the following keyOptions[button.key] part. If it is present in our object( and we have a function associated with it), it will return a truthy value which will cause the keyOptions[button.key] to execute. This will basically cut out all the if statements we could have used and keep it in a nice, and neat line that is easy to scale.

Now that we have a scaleable line, what if we wanted to add either a default function to happen if they button pressed does not exist inside our keyOption, or what if we wanted to grow our keyOption hash a bit more. In the examples we used above, you may have noticed a function called idk that we haven’t used yet. Well, if we wanted to do that, can do another short-circuiting trick and that is taking advantage of the || .

Short-circuiting with || works similar to && with one tiny difference. It will stop executing the conditions when it finds a truthy value. So if the first condition is truthy, it will never execute the second condition. it will only execute the 2nd condition if the first value is not truthy.
So equipped with this knowledge, we can now try something like this

By putting keyOptions[button.key] as the first option in an || condition, it will first see if the button pressed is present in keyOptions object. If it is not, it will execute the idk function by default. Now depending on how you set up the default function (the idk function here), you can set it up to either assign a function/task to the keyOptions object above, or return a faulty value. This will then allow you to do what you want with the second option in the && statement.

So basically, by doing some responsible short-circuiting, you are saving yourself a bunch of lines in code, and making it scaleable in a very neat way.