Jhon Black
Frontend Weekly
Published in
3 min readDec 7, 2020

--

Write code without if-else statement or art of avoiding if statement

branching

Not a long time ago I was looking for the job and once I was asked to create a function which returns true or false if the input is a number or not, but without using if and I did it.

In the beginning, I thought it will be easy peasy lemon squeezy but then I realised it's not. This task made me think different. Seriously it's an exciting way to think out of the box and find new ways to solve old rusty problems that always was done in the same way. I'm not saying that old is bad or if statement is bad but if you see if in if in if it can be terrifying, unreadable, and confusing.

if nesting make code complex and this can cause issues in future, the complexity of code measured by Cyclomatic complexity it's calculated by measuring the number of independent paths through a source code, and every time we using if statement we creating a new path.

I prepared little examples that can be used in a job interview or can be reused anywhere.

So let's look at some ways to keep away from if

Example 1: Check if the value is number

First, let's try to make a function isNum which I already talked about above (from my interview).

It's pretty easy I think you should come up with something like this.

This solution is really easy and straight forward. It can be lightened and made in one line and still be readable. Nothing to say about it.

Example 2: Find a celebrity by name

Now, let's have something more complicated. Let's make a function which takes a name and returns the name of the celebrity with the provided first name.

In this example, you see how large and unpleasant becomes a simple function if it is overloaded with if statements (same with switch/case). Example in betterSelector has many pros like readability, ease of expanding and supporting but have one serious flaw, that I have to point. If you provide in your selectorObj key that doesn't exist there, you will have undefined in the result and this can cause many unpredictable issues in your project. Always handle not provided values.

Example 3: Filter odd numbers

Next example is naive, we will filter all odd numbers and return in result array of even numbers

This example is very easy and obvious, filter function just checking if something left after dividing on 2 if it is, then it's odd and must not be included to result.

Example 4: Check if the object has nested value

Sometimes we have deeply nested objects which can contain data that we need. In these cases, we use something similar to these examples.

Here in getDataOld we just checking if the path exists in our current object, then we proceed and repeat until we get our target value or return false if one of the condition is not worked. Its really not reusable and scaleable solution but sometimes you can find something like this even in production code! To fix it I created other function, getDataNew it accepts 2 arguments, first is paths array — just string array which represents keys of an object which lead to nested target field in the object. Second is the object itself. In this function, I used for loop to go through fields of the object and saved the previous path in a variable with the same name and overwrite data with current path and eventually with the value of the target field.

Summary.

In the examples above, we see how it's easy to avoid if nesting and create expandable alternatives.

If you don't want to create all this function you can always use some Matching pattern library from NPM.

Remember there no such thing as irreplaceable if. But not all if`s are must be replaced.

Did I convince you not to use if everywhere? What pros and cons do you see, please share with us. Anyway, I hope this article was useful to you.

Thanks for reading.

--

--

Jhon Black
Frontend Weekly

Front End Developer, writing tech articles about web and not only.