Javascript if/else shorthand explained (with common uses cases)
Tags: javascript, webdev, beginners
Published: 2023-02-05 13:45:43

> ✋ **Update:** This post was originally published on my blog [decodingweb.dev](https://www.decodingweb.dev), where you can read the [latest version](https://www.decodingweb.dev/javascript-if-else-shorthand) for a 💯 user experience. _~reza_

If you’re looking for the shorthand of `if/else` in JavaScript, you need to use the ternary – a.k.a the conditional – operator.

The **ternary operator** takes three operands: a condition followed by a question mark (`?`), and two JavaScript expressions separated by a colon (`:`). 

The expression on the left side of the colon will be executed if the condition is _truthy_. But if the condition is _falsy_, the right-side expression will be executed:

```js
condition ? exprIfConditionIsTruthy : exprIfConditionIsFalsy
```

The result of a ternary operator can be assigned to a variable, and used in another expression. You can also use it when returning a value in a function.

Let's see some use cases.

**Initializing variables:** The most common use case of ternary operators is initializing variables:

```js
let backgroundColor = isChrismas ? 'red' : 'yellow'
```

With an `if/else`, you'd achieve the same thing like so:

```js
let backgroundColor = ''

if (isChristmas) {
   backgroundColor = 'red'
} else {
  backgroundColor = 'yellow'
}
```

Not bad either.

**Ternary operator in functions:** You can use the ternary operator to return a value from a function.

The following function determines whether a number is even or not:

```js
function isEven  (value) {
   return value % 2 === 0 ? true : false
}
```

**Ternary operator in strings:** You can also use the ternary operator when generating strings:

```js
let greeting = 'Welcome dear ' + user ? user.name : 'user'
```

In the above example, if the user is authenticated, we'll greet them by name, otherwise `'Welcome dear user'` would be displayed.

## Ternary operators can be nested

The ternary operator is right-associative, meaning it can be nested - just like having consequent `if/else` statements.

On the other hand `exprIfConditionIsTruthy` and `exprIfConditionIsFalsy` operands can be a ternary operator:

```js
let someVariable = condition1 ? value1 
: condition2 ? value2
: condition3 : value 3 : value 4
```

## Readability of shorthand `if/else` in JavaScript

Even though the ternary operator is short and sweet, it doesn't make `if/else` statements a bad choice.

Sometimes an `if/else` statement is more readable than a ternary operator, regardless of the number of lines.

Which one would you choose for nested conditions:

**❋ The ternary apporach**

```js
function someFunction() {
    return condition1 ? value1 
        : condition2 ? value2 : value3
}
```

**❋ The `if/else` approach:**

```js
function someFunction () {
    if (condition1) {
        return value1
    } else if (condition2) {
        return value2
    }

    // If none of the above are truthy
    return value3
}
```

Although the `if/else` approach needs a few more lines, it's closer to human language. As a rule of thumb, the ternary operator is handy for one-liners. For other flow control scenarios, use `if/else`.

Alright, I think that does it for today! I hope you found this quick guide helpful!

Thanks for reading.

---

**❤️ You might like:**

- [JavaScript double exclamation mark explained (with examples)](https://www.decodingweb.dev/javascript-double-exclamation-mark)
- [How to check if an element exists in JavaScript (with examples)](https://www.decodingweb.dev/javascript-check-if-element-exists)
- [JavaScript isset Equivalent (3 methods)](https://www.decodingweb.dev/javascript-isset-equivalent)