Javascript Shorthands: Ternary, Logical || and && Assignments
Tags: javascript, webdev, beginners
Published: 2022-04-12 19:37:25

# Gotta go fast

> Why waste time say lot word when few word do trick?

This is perhaps the insidious mantra of programmers the world over. Too busy hacking into the mainframe they have no time for multisyllabic variable names. They don't have the bandwidth in their own minds to cache long winded expressions. They would rather use --nay, they NEED to use-- terse, to-the-point, language to snipe their bits out of the sky. Like a painter at an easel, a programmer at a greasy keyboard feels the gravitational pull, the irresistible urge, the hypnotic Siren's song... to use _shorthand expressions_.

Wise programmers often warn young programmers to not adopt this mentality, especially while learning how to code. It can become a bad habit that can in cases lead to harder to read, harder to maintain, and harder to update code. That said, in my explorations of the topic, I found it useful to discover (to my delight) that a) there are proper places to use it, and b) people do use them and you should know how to read them. This blog is about the ternary expression and its tangent cousins -- the AND and the OR operators -- and how they can be used to write succinct yet still straightforward code.

# The Ternary Expression

Ternary expressions are a shorthand way to write `if else` statements.

Ternary expressions threw me off early on. The semantic structure of `if else` statement was easy to understand. If this expression returns truthy, then execute this expression. If it is not truthy, execute this other expression. Why fix something that ain't broke?

The strange syntax of a `?` and the trailing `:` were confusing. I think it's because when reading a line of code, the `?` and `:` can be easily lost in the jumble of text and numbers.

Here's a breakdown of it, in plain English:

**if this is true `?` then do this `:` otherwise do this**

The usefulness of ternary expressions comes in handy when you want a single-line way to assign a variable a value dependent on another variable. Let's take these three lines that return a `isFullyCharged` as `true` if our battery level is at 100%.

```js
const batteryLevel = 26;
const isFullyCharged = batteryLevel == 100 ? true : false;

return isFullyCharged;
//false
```

Written out as an `if else` statement, and assuming we still want to return a new boolean variable, it comes out much longer.

```js
const batteryLevel = 26;
let isFullyCharged;

if (batteryLevel == 100){
  isFullyCharged = true;
} else {
  isFullyCharged = false;
}

return isFullyCharged;
```

Ternary expressions are useful then for concise single-line checks that are actually quite readable once their at first strange syntax can be overcome.

And, as I've read more about them, they can also simplify more complex situations, like nested checks, in which case using [chained ternary expressions](https://medium.com/javascript-scene/nested-ternaries-are-great-361bddd0f340) results in cleaner and less bug prone code.

# The Logical OR Assignment

The logical OR operator can be used in many ways, but the one I will discuss here is its use as a way to check a value before assignment to a variable.

The OR operator, denoted as `||`, can be used in the primary statement to return a `true` or `false` value.

The `||` operator typically takes two expressions on either side of it. Take this example:

```js
let a = 5
let b = 1

return b > a || a > b
```

This short program returns a `true` or `false` boolean. The OR operator is executed left to right. First `b > a` is checked to be true. In this case, `b` is smaller than `a`, so the expression returns `false`. Upon this return the `||` operator then returns the value of the expression on its right. In this case, `a > b` returns true, because 5 is a larger number than 1, so as a result the entire expression returns true.

When it comes to **logical OR assignment** can be used as a checker to ensure a value is empty before assigning it. For instance, this example:

```js
let name

return name ||= "No name"
```

The `||=` operator only assigns `name` to `"No name"` if `name` is falsy.

The output of this program will be "No name". The `||=` shorthand is a way to check if the value on the left is falsy before assigning it to the value on the right. In this case, `name` is declared but undefined, so has the value `undefined`. In Javascript, `undefined` is considered a falsy value, so as an primitive value it returns `false`. Because the left expression is false, the right expression is executed.

This might become more clear if the `name ||= "No name"` expression is pulled apart, into its non-shorthand components. That expression is equivalent to `name || (name = "No name")`!

This is worth reiterating, the following two expressions are equivalent, and both assign "No name" to `name`:

```js
name ||= "No name"

name || (name = "No name")
```

This is easier to read, as it more closely resembles the typical OR expression. In essence, this shorthand is a quick way to check if the value of `name` is falsy before deciding to assign it a value. This can be useful when you don't want to overwrite a variable or if you don't want to return `undefined` and only return a legible string instead.

Using the `||=` is also completely different from assigning a variable to an OR expression. For instance, `name = "No name" || "Other name` is valid, and will assign name to `"No name"`, but it does so through a different means than the `||=`

# The Logical AND Assignment

The logical AND is much like the OR. Instead denoted as `&&`, it is also an operator that takes in two values, one of the left and one on the right. In this case, both the left _and_ right values must convert into truthy values for the second value to be returned. Otherwise the first value is returned. This evaluation is executed left to right. If the left value converts to falsy, the right value is never evaluated and the entire AND expression returns false. However if both execute as truthy, then the _second_ value will be returned.

So take the example:

```js
let name
name = '' && 'Bob';  // name is assigned ''
name = 'Bob' && 'Jill';   // name is assigned "Jill
```

In the first expression, `''` is an empty string and considered falsy. The entire && expression then returns the first value, which is falsely, and short circuits the entire expression. In the second expression, `name` is assigned to `'Jill'` because both strings `'Bob'` and `'Jill'` return truthy, and so both are evaluated. Because both evaluate true, the second value is returned.

Now we go onto the **logical AND assignment**:

```js
let name
let lastname = "Exists"
name &&= "Tywen"
lastname &&= "Kelly
```

When it comes to the logical AND assignment, denoted by `&&=`, the expression only assigns `name` to `"Tywen"` if name is truthy. `name` is actually falsy, as it is undefined, so name is not assigned the value `"Tywen"`. `lastname` on the other hand is assigned a truthy value of `"Exists"`, so when it comes time to assign it with a logical AND assignment, it successfully assigns it to `"Kelly"`.