There are 2 concepts/truths you need to understand before trying to take advantage of this ability.
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.
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.