How to use Object Literals in JavaScript to write complex conditions?

Writing complex conditions in JavaScript has always had the potential to create some untidy code. A long list of if/else statements or switch cases can get bloated fast.

When there are multiple conditions, I find object literals to be the most readable way of structuring code. Let’s have a look at how they work.

As an example, let’s say we have a function that takes a dog breed and returns the quote. Using if/else statements, it would look like this:

This isn’t great. Not only is it not very readable, but we are also repeating toLowerCase() for every statement.

We could avoid that repetition by assigning the lowercased breed to a variable at the start of the function or alternatively use a switch statement, which would look like this:

We are now only calling toLowerCase() once, but this still doesn’t feel that readable. switch statements can also be prone to errors. In this case, we are just returning a value, but when you have more complex functionality, it can be easy to miss a break statement and introduce bugs.

An Alternative

You can use an object to achieve the same functionality as above in a much neater way. Let’s have a look at an example:

We have an object where the keys are the conditions and the values are the responses. Then we can use the square bracket notation to select the correct value of the object from the breed passed in.

The final part of line 10 (?? "Quote not found") uses nullish coalescing to assign a default response. This means that if breeds[breed.toLowercase()]is null or undefined (but not false or 0 ), then the default string “Quote not found” is returned. This is important because we might legitimately want to return false or 0 from our conditional. For example:

This is a very contrived example, but hopefully, it illustrates how nullish coalescing can help avoid introducing bugs!

More Complex Logic

There are times when you might need to do some more complex logic inside your conditions. To achieve this, you can pass a function as the value to your object keys and execute the response:

We are selecting the calculation we want to do and executing the response, passing the two numbers. You can use optional chaining (the ?. in JavaScript, is a new feature introduced in ES2020.) to only execute the response if it is defined. Otherwise, fall through to the default return string.

Conclusion

Writing conditionals will always be a matter of taste, and certain situations will require a different approach. However, I find that when I have several conditions to check against, object literals are the most readable and maintainable way.

I’d love to hear your thoughts or if you have a different approach than the ones outlined above!