JavaScript Refactoring Tips — Arrays and Conditionals
Tags: codequality, javascript, webdev, programming
Published: 2021-01-25 03:18:17

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

JavaScript is an easy to learn programming language. It’s easy to write programs that run and does something. However, it’s hard to write a piece of clean JavaScript code.

In this article, we’ll look at how to clean up conditionals with arrays, and use `classList` to manipulate class names.

### Replacing Long Or Expressions with Array Checks

We can replace long or expressions with array checks easily. For instance, instead of writing:

```
if (fruit === 'apple' || fruit === 'orange' || fruit === 'grape') {
  //...
}
```

We can use some array methods to reduce the length of the conditional expression.

One way is to use the array instance’s `includes` method to do so:

```
if (['apple', 'orange' ,'grape'].includes(fruit)) {
  //...
}
```

As we can see, we checked if any one of them is the value of `fruit` by comparing the value of `fruit` in an array with `includes` .

The `includes` method returns `true` if the value we passed into the argument is included in the array instance and `false` otherwise.

Also, we can use the array instance’s `some` method to check the value:

```
if (['apple', 'orange', 'grape'].some(a => a === fruit)) {
  //...
}
```

The `some` method lets us check if there’s any array entry with the given condition in the callback exists.

It returns `true` if one or more exists and `false` otherwise.

We reduced the long conditional expression with arrays in the first example.

### Using the classList Property in DOM Elements

The easiest way to check if a class exists in a DOM element and manipulate multiple classes is to use the `classList` property.

For instance, if we want to add multiple classes, we can write the following code:

```
const p = document.querySelector('p');
p.classList.add('foo');
p.classList.add('bar');
p.classList.add('baz');
```

This way, we can add multiple classes without manipulating strings. We just get the `classList` property of a DOM element object and then call `add` to add the classes by passing in a string with the class name into the the `add` method.

The rendered DOM element now has the `foo` , `bar` and `baz` classes.

Likewise, we can call the `classList` property’s `remove` method with a string with the class name to remove to remove the class.

For instance, we can write:

```
const p = document.querySelector('p');
p.classList.add('foo');
p.classList.add('bar');
p.classList.add('baz');
p.classList.remove('baz');
```

Then the rendered HTML only has the `foo` and `bar` classes since we called `remove` to remove the `baz` class.

To check if a class name exists in a DOM element object, we can use the `contains` method.

To use it, we can write:

```
const p = document.querySelector('p');
p.classList.add('foo');
p.classList.add('bar');
const hasBaz = p.classList.contains('baz');
```

In the code above, we called the `contains` method on the `classList` property to check if the `baz` class is rendered in the p element.

Since we didn’t add it in the HTML or with the `add` method, it should return `false` .

The `classList` property has the `toggle` method to toggle class names on and off. For instance, given the following HTML:

```
<button>
  toggle
</button>
<p>
  foo
</p>
```

We can use the button to toggle the `bar` class on and off as follows:

```
const p = document.querySelector('p');
const button = document.querySelector('button');
p.classList.add('foo');
p.classList.add('bar');

button.onclick = () => {
  p.classList.toggle('bar');
}
```

In the code above, we called the `toggle` method in the click handler to toggle the `bar` class on and off as we click the button. So we should see that in the HTML.

The `clasList` property has an array-like iterable object called the `DOMTokenList` object as a value. Therefore, we can use the spread operator to convert it to an array. This should convert it to an array of strings with the class names.

For instance, we can write the following code:

```
const p = document.querySelector('p');
p.classList.add('foo');
p.classList.add('bar');
const classArr = [...p.classList];
```

In the code above, we just used the spread operator to spread the `classList` property into an array.

Then we get that `classArr` is `[“foo”, “bar”]` .

Once we converted the `DOMTokenList` into an array, then we can use any array methods to manipulate the code.

The spread operator makes a copy of the original object and then spread it into an array, so we can still call the methods in the `DOMTokenList` to manipulate the class names as we want it.

### Conclusion

Long boolean expressions with the `||` operator can be replaced with an array that checks if any of the items in the array matches the value that we’re checking for.

To manipulate multiple class names, we should use the `classList` property that’s part of a DOM element object. This way, we can add, remove, and toggle classes without having to manipulate strings and set it to the `className` property ourselves.