Here is a one-liner I came up with today that uses short circuit evaluation via logical OR and logical AND operators. I’m attempting to do two things here:

  • Hide two HTML elements
  • Show two HTML elements

To accomplish the above I decided to write a function that expects an argument to indicate whether the elements should be hidden (false) or visible (true).

This would be the typical approach:

function toggle(bool){
   if (bool){
   } else {

Here is the same function but using a one-liner to do all the logic:

function toggle(bool){
   (bool && !!$('#sectionHeader').show() && !!$('#homeIcon').show()) || !$('#sectionHeader').hide() || $('#homeIcon').hide();

The logical AND && operator requires that each operand be true in order for the operand that follows to be evaluated. If any of the operands fail then the value of that operand is returned.

Lets dissect the initial parenthesized expression:

  1. bool
    • This is the flag passed to the function that drives if we are going to show or hide our HTML elements. Lets assume that bool is “true”. Since we assume “true” we know that the next operand will be evaluated. If it were false then the ***value*** of the entire parenthesized expression would be “false” and none of the operands within the parenthesized expression would be evaluated.


  2. !!$(‘#sectionHeader’).show()
    • The logical NOT operator is used twice !! to coerce the value of the operand to true or false. To determine the boolean nature of the operand the jQuery expression must first be evaluated. jQuery returns an object. The object gets coerced to “true” and so the next operand will be evaluated.


  3. !!$(‘#homeIcon’).show()
    • This is the last operand within the parenthesized expression. Once evaluated jQuery returns an object and the two logical NOT operators coerce it to boolean “true”. As it is the last operator in the parenthesized expression its value is returned as the value of the expression. In this case the parenthesized expression is boolean “true”.


  4. ||
    • The logical OR || operator behaves differently than the logical AND (&&) operator. Where logical AND executes its operands if the preceding operand returned “true”, logical OR only evaluates its operands if the preceding expression was false. Here we know that because all of the operands of the parenthesized “logical AND expression” were evaluated and that the last operand returned true that the entire value of the expression is boolean “true”. Because of this all evaluation stops (short circuits) at that point. Nothing else is evaluated and the two HTML elements are shown.


This diagram illustrates the above:


Next lets assume that bool is false. We’ll then start over from the beginning to see what happens.

  1. bool
    • Since bool is false none of the other operators grouped by the parenthesis are evaluated (another short circuit) and the returned value for the entire parenthesized expression is now boolean “false”


  2. ||
    • The logical OR operator now comes into play. It will only evaluate the operands to the right if the operand to the left was false. Since that is the case here the operand to the right of the logical OR operator is evaluated next…


  3. !$(‘#sectionHeader’).hide()
    • Note the single logical NOT operator (!). It is coercing the object returned by jQuery as boolean “false”. This means that the logical OR operator that follows hasn’t been satisfied and the next operand will be evaluated.


  4. $(‘#homeIcon’).hide()
    • This is a simple expression, just a bit of jQuery. If we get to this point we don’t really care what the value is here since we know it will be evaluated and our HTML element will be hidden. So then, there is no need to coerce the object that jQuery returns.


This next image illustrates the preceding bullet points: