Question mark features in JavaScript
Tags: javascript, typescript
Published: 2022-06-22 11:59:06

## Table of Contents

1. [Introduction](#introduction)
2. [Ternary](#ternary)
3. [Optional Chaining](#optional-chaining)
4. [Nullish Coalescing Operator](#nullish-coalescing-operator)
5. [Logical Nullish Assignment](#logical-nullish-assignment)

## Introduction
JavaScript has some pretty helpful features that use `?` in the syntax, but they don't necessarily have much in common besides the question mark. In this article, my goal is to show you cool tricks, starting with a well-known (and also present in other languages, which is the ternary) and going through some less known operators.

If you want to find more about me, @kevbeltrao on Instagram, Youtube, Github, Linkedin, etc. Or simply [kevbeltrao.com.br](https://www.kevbeltrao.com.br/).

## Ternary
Ternary is basically a different way to write an if/else statement. The regular if/else statement is represented like:

```javascript
if (condition) {
  actionIfTrue();
} else {
  actionIfFalse();
}
```

I like to think of the ternary as a question, so if I want to ask "is it a panda?" I need that question mark. After the question, I need the return options of the ternary (the option if the condition is true and the option if false), which will be separated by a `:`

```javascript
isPanda ? actionIfTrue() : actionIfFalse() // We're asking if isPanda is true/truthy
```

And as pointed out, you choose the `return` value of the ternary. It's an expression, so you can use it for a value assignment, for example:

```javascript
const animalColor = animal === 'panda' ? 'white' : 'blue';
```

And of course you can nest ternaries (which I strongly discourage due to its loss of readability):

```javascript
const animalColor = animal === 'panda' ? 'white' : animal === 'crocodile' ? 'green' : 'blue';
```

Which has the same effect as in:

```javascript
let animalColor;

if (animal === 'panda') {
  animalColor = 'white';
} else if {
  animalColor = 'green';
} else {
  animalColor = 'blue';
}
```

## Optional Chaining
Optional chaining is one of the most awesome features in JavaScript, it helps us with value checking if values are undefined using a shorter syntax. First of all, I'll show you what you should be afraid of:

```javascript
const person = {
  address: {
    streetName: 'JS Ave',
  }
};

getCityPhoneCode(person.address.city);
```

In this case, we are trying to access `city` within `address`, which doesn't exist. No problems so far, the application won't crash by that (unless `getCityPhoneCode` expects a valid value), but we are sending the value `undefined` as an argument. So, in JavaScript, if you try accessing an unexisting value from an object you get `undefined`. Keep that in mind!

But what if our code was:

```javascript
const person = {};

getCityPhoneCode(person.address.city);
```

In this case, our application would crash because we are not trying to access an unexisting property from an object anymore, but from undefined. The problem here is that `address` is undefined, so we can't do `undefined.city`. Since there's a chance of address being undefined, we'd have to be extra careful and usually make a simple check before:

```javascript
if (person.address) {
  getCityPhoneCode(person.address.city);
}
```

But JavaScript now provides us optional chaining, which would look like that:

```javascript
const person = {};

getCityPhoneCode(person.address?.city);
```

So if address is null/undefined, we'll instantly get `undefined` returned instead of having our app crashing trying to access city. We can also have multiple checks:

```javascript
person?.eyes?.color?.hex;
```

And if either person, eyes, or color is null/undefined, `undefined` is returned and our code is protected from the error `cannot read properties of undefined`.

## Nullish Coalescing Operator
Nullish Coalescing Operator looks scary but is even simpler than the previous ones. To simplify, the question you want to make is "is this value either null or undefined?" if so, return the next one (it'll get easier with examples):

```javascript
null ?? 1 // 1
undefined ?? 'Hello, World' // 'Hello, World'
0 ?? 4 // 0
false ?? 3 // false
```

It's often compared to the `||` (or) operator, which returns the first truthy value (or the last value if neither are truthy):
```javascript
null || 1 // 1
undefined || 'Hello, World' // 'Hello, World'
0 || 4 // 4
false || 3 // 3
```

Let's say you want to send the price for a function, but the price might be undefined and if so, the product is free. What you wanna do is:

```JavaScript
applyDiscount(price ?? getPrice());
```

And this way, if price is `3.59`, we'll send this value as an argument. In case price is null/undefined, we're calling `getPrice` and sending its return to `applyDiscount`.

## Logical Nullish Assignment
If you got the last one, this one uses pretty much the same logic. Do you know when you want to assign a value to a variable but only if it hasn't already been done? Here's what it'd look like:

```javascript
price ??= 0;
```

What we are saying is: assign 0 to price, but only if its value is `null`/`undefined`.

In other words, it's a way of making sure you're only assigning a value if the variable doesn't have one yet.