Manav Misra

Posted on

# Logical Operators and Short Circuiting

In many programming languages, we denote 'and' with: `&&` and 'or' with `||`.

### `&&`

`&&` expects both the left and the right hand side operands to be `true` for the entire expression to evaluate to `true`. For example, `roomCleaned && dishesWashed` requires both a 'clean room' and 'dishes washed' for the whole expression to be `true`. If either of those are false, the entire expression returns false.

Furthermore, ππ½, if `roomCleaned` is `false`, there is no reason to bother checking `dishesWashed`. If the left-hand side operand is `false`, we are *short circuited. JS will not evaluate the right-hand side operand.

### `||`

`||` only requires one of the operands to be `true` for the entire expression to return `true`. For example, `roomCleaned || dishesWashed` only needs either operand to be `true`. As long as either of those is `true`, the entire expression returns true.

Furthermore, ππ½, if `roomCleaned` is `true`, there is no reason to bother checking `dishesWashed`. If the left-hand side operand is `true`, we are *short circuited.* JS will not evaluate the right-hand side operand.

## 'falsey' and 'truthy'

When working with 'non-boolean' operands, logical operators will treat them as 'falsey' or 'truthy.' For example, `""` is 'falsey,' as is `0`. `"a"` or `1` are 'truthy.' In essence, JS treats 'empty-ish' or `null`-ish things as 'falsey.'

Combining this with the short circuiting:

``````    // 'or' Short Circuit! - "a" is 'truthy', so no need to for '333'
"a" || 333; // a

const a = "";
// 'a' is bound to a 'falsey' empty STRING, so we 'take' 'truthy' '333'.
a || 333; // 333

null || "hello"; // hello

// "a" is 'truthy,' but still must look at '333'
"a" && 333; // 333

// 'and' Short Circuit! - is 'falsey' - don't bother with '333'.
0 && 333; // 0

// 'and' Short Circuit! - 'null 'falsey' - don't bother with 'hello'.
null && "hello"; // null
``````

## Short Circuit Assignment

Although use cases for `&&` short-circuiting are virtually non-existent, we can use `||` short-circuiting to avoid having 'blank' for 'falsey' values in our data. The concept is the same as we saw ππ½, but we are just combining that with variable assignment.

``````    // Imagine user left form field blank - no FORM VALIDATION.
// We can assign a default value so that we can still 'accept' the 'form,' but it's clear that the user left that blank.
const userName = "" || "Blank form field";

// Imagine that we retrieved some product from database as an OBJECT LITERAL.
const someProduct = {
name: "Great Widget",
price: 0 // Bad data entry - no database validation! π±
}

// We can prevent '0' from being shown to user.
const displayedPrice = someProduct.price || "Please Call For Price!"
``````