JavaScript Refactoring Tips — Arrays and Conditionals

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.