5 Tips for writing better conditionals in JavaScript
Tags: javascript, codequality, tutorial
Published: 2020-11-21 17:39:21

Conditionals are one of the first things we learn as developers. They are easy to understand and are easy to grasp from a mathematical standpoint. Due to their non-complex nature, developers often stop learning new practices regarding conditionals, assuming they know everything there is to know about them.

In this blog post, we are going to craft different ways of using conditionals in our code, focused on **readability**.

These tips are commonly mentioned in other articles, but I wanted to curate my own experience as a JavaScript developer.

## **1. Use object literals instead of switch**
Let's take a look at a common switch conditional example:

```javascript
switch (name) {
  case 'antonio':
    return { name: 'antonio' };
  case 'matthew':
    return { name: 'matthew' };
  case 'linus':
    return { name: 'linus' };
  default:
    return undefined;
}
```

Is there anything wrong with this code? No. This code will work just fine, and it is a common practice. But why not go a step further and apply a cleaner syntax using object literal?


```javascript
const userFactory = {
  antonio: { name: 'antonio' },
  matthew: { name: 'matthew' },
  linus: { name: 'linus' },
};

const name = 'antonio';
return userFactory[name]; // { name: 'antonio' }
```

What we've achieved here is cleaner syntax, higher readability, and easier modularity for future modifications.

You could improve this even further utilizing Lodash's **get** functionality, to ensure safe fallbacks.

```javascript
import { get } from 'lodash';
 
const userFactory = {
  antonio: { name: 'antonio' },
  matthew: { name: 'matthew' },
  linus: { name: 'linus' },
};

const name = 'antonio';
return get(userFactory, name, { name: 'fallback' });
```

Does this mean you should completely eliminate switch statements? No. This is just an example of an alternative, sometimes what works best is what you or your team understand best. An example where I would heavily use object literals is in a reducer, since it essentially is a giant switch statement, why not make it more readable?

## **2. Use Array.includes instead of multiple conditions**
Another common example of conditionals is the following:

```javascript
if (name === 'antonio' || name === 'matthew' || name === 'linus') {
  return true;
}
```

Again, there is nothing fundamentally wrong with this code, but let's make it prettier.

```javascript
const admins = ['antonio', 'matthew', 'linus'];

if (admins.includes(name)) {
  return true;
}
```

See the difference? Notice how easier it is to add new admins when we've separated concerns?

## **3. Use default function parameters**
This one is not so much of a *eureka* discovery, but it can be useful to someone who is not yet utilizing it.

We often write examples like this in our functions:

```javascript
function (name) {
  let finalName = name;

  if (name === undefined) {
    finalName = 'antonio'
  }

  // do some logic with finalName
}
```

How can we make this prettier? Using default parameter values.

```javascript
function (name = 'antonio') {
  // do some logic with name
}
```

## **4. Using Array.every & Array.some**

Let's say you're writing a function that runs our items through conditional and requires all of the items to pass.

We might wanna write something like this:

```javascript
const users = [
  { name: 'Antonio', isAdmin: true },
  { name: 'Matthew', isAdmin: true },
  { name: 'Linus', isAdmin: true },
];

let areAllAdmins;

users.forEach((user) => {
  if (!areAllAdmins) { // break function };

  areAllAdmins = user.isAdmin === true;
});
```

Instead, we can shorten this:

```javascript
const users = [
  { name: 'Antonio', isAdmin: true },
  { name: 'Matthew', isAdmin: true },
  { name: 'Linus', isAdmin: true },
];

const areAllAdmins = users.every((user) => !!user.isAdmin);
```

Or, alternatively using `Array.some`:

```javascript
const users = [
  { name: 'Antonio', isAdmin: true },
  { name: 'Matthew', isAdmin: true },
  { name: 'Linus', isAdmin: true },
];

const areAllAdmins = users.some((user) => !!user.isAdmin);
```

## **5. Returning early**

Instead of returning a single variable at the end of our function, we can utilize early returns in order to simplify our code.

```javascript
function canAccess(user) {
  let finalStatus;

  if (user) {
    if (user.isAdmin) {
      finalStatus = true;
    } else {
      finalStatus = false;
    }
  }

  return finalStatus;
}
```

Now let's utilize early returns:

```javascript
function canAccess(user) {
  if (!user) return false;
  if (user.isAdmin) return true;
  if (!user.isAdmin) return false;
}
```

Of course, this can be even more simplified with `return user.isAdmin`, but for the sake of tutorial, I am writing explicitly.

## **Conclusion**

These have been some of my tips for better handling of conditionals.

Being a developer is a never-ending tutorial, never assume you know everything about a subject and be eager to always learn new things. Even the simplest things can be improved, either in optimization, or readability.