DEV Community

Stop using if else

Rishav Jadon on October 14, 2021

Recently, I had a take home assignment for a front end role, and I had to make a sort of Dashboard. I thought I did everything right, but I was re...

Read full post

Nico • Oct 14 '21

I agree with what @bubster said. You should rename it to "stop abusing".

Plus I did some benchmarking. It seems like if/else is always the slowest, using a Map makes only a negligible difference in Firefox, and an object is much faster in Chrome. Test for yourself: jsbench.me/jekur7m830/1

(I modified your code a little bit to keep things fair. You called toLowerCase for every branch in the first example and didn't use it in the latter two. I also moved the declaration of the object/Map out of the function, otherwise it would be created for every iteration)

When adding more calls like

whoIsThis('naruto')
whoIsThis('')

to each test case if/else actually wins in Chrome which makes me think if Chrome somehow caches it.

Michael Currin • Oct 16 '21

At large scale a lookup by key is far more efficient. At small scale it is maybe small difference.

If you had extreme case of code of say 1000 branches of if else statements, at worst it takes 1000 attempts until the last one matches.

While looking up a value from an object/map by key is constant - only needed exactly one attempt to find the result.

Rishav Jadon • Oct 14 '21

Oh my bad for not using toLowerCase in further examples! Thanks for the tip about moving the dictionary out of the function.

BK ☕ • Oct 16 '21

You agreed with the tip, but the code example is still not updated. It's better to make the change, so beginners can learn from better examples.

BK ☕ • Oct 16 '21

Btw, my other comment was referring to "Thanks for the tip about moving the dictionary out of the function."

Have a lovely day.

Matthieu Cneude • Oct 14 '21

Ah! Sweet coding challenges. I still remember this CTO who wanted me to replace an if else statement using a strategy pattern... the code was 10 lines. How to introduce useless complexity 101.

using multiple if else statements chained together or big switch statements will make your code look very ugly, less readable and error prone.

Why? I mean if it's so ugly, less readable, and error prone, why so many programming language implement them?

Andrei Dascalu • Oct 14 '21

The first solution is NOT an object-oriented solution. You're using a JS "object" as a poor man's map of sorts but you're not using anything remotely OOP.

Jason C. McDonald • Oct 16 '21 • Edited

It's okay to go looking for better solutions than just a chained if-else. On the other hand, many evils have been committed in pursuit of over-optimization, merely on the basis of the feeling that "real developers don't use if statements". Oh yes, we use them. Often. And liberally. And they work really, really well.

Six Things You Thought Senior Devs Did (But We Don't)

Jason C. McDonald ・ May 21 '21 ・ 3 min read

Brendan Cowley • Oct 19 '21

You mean that developers have a tendency to overly-complicate simple problems by implementing 10 ton hammer solutions? Pshaw! Haha, for the rest of us "normies" simple, repeatable, digestible, straightforward solutions are always preferable to the "smart" solution.

naveennamani • Oct 14 '21

This only works if you're comparing a single variable with known values. For other cases you've to use if/else

Rishav Jadon • Oct 14 '21

Can you share any example where you cannot make use of this?

naveennamani • Oct 14 '21

if(a===10) {
...
} else if(b===20) {
...
} else {
...
}

Rishav Jadon • Oct 14 '21

I meant a real example from code. Anyways, we need to write good code in order to not add conditionals like these.

TvO • Oct 14 '21 • Edited

This is a perfectly fine example of real code lol.

coolprofessor • Oct 15 '21 • Edited

Here:

function signIn(user,password){
    if( user === 'bob'  && password === '' ){
         return true
    }else if( user === 'sally' && password === 'gitIsCool7#6' ){
         return true
    }else if( user === 'jerry' && password === 'hackme123' ){
         return true
    }
}

signIn('jerry','hackme123');
//will return ability to sign in (boolean)

@naveennamani is right. There are ways to do things with an array, but it can sometimes get over complicated and unreadable.

David Lazic • Oct 16 '21 • Edited

There are still elegant ways to handle that kind of requirement within the function:

  function signIn(user, password) {
    const ALLOWED_USERS = {
      'bob': '',
      'sally': 'gitIsCool7',
      'jerry': 'hackme123',
    };

    return ALLOWED_USERS[user] && ALLOWED_USERS[user] === password || 'Whateva'
  }

And this translated to the initial a and b example becomes:

function example(key, value) {
  const CONFIG_LOOKUP = {
    'a': 10,
    'b': 20,
  };

  return CONFIG_LOOKUP[key] && CONFIG_LOOKUP[key] === value || 'Whateva';
}

coolprofessor • Oct 16 '21

I see your point, but what if there is a property that is completely unrelated to the other variables? It would be pointless to do it for each one.

function signIn(user,password){
    if( user === 'bob'  && password === '' ){
         return true
    }else if(user === 'sally' && password === 'gitIsCool7#6' && itIsMorning){
         return true
    }else if(user === 'jerry' && password === 'hackme123' && SallyIsOffline){
         return true
    }
}

signIn('jerry','hackme123');
//will return ability to sign in (boolean)

David Lazic • Oct 16 '21 • Edited

With lookup maps approach you can drill down how much you wantt with minimal changes to the initial structure, so it would be something like this:

function isMorning () { ... }
function isSallyoffline () { ... }

function signIn(user, password) {
    const ALLOWED_USERS = {
      'bob': {
        pwd: '',
        isValid: () => true,
      },
      'sally': {
        pwd: 'gitIsCool7',
        isValid: () => isMorning,
      },
      'jerry': {
        pwd: 'hackme123',
        isValid: () => isSallyoffline,
      },
    };

    return ALLOWED_USERS[user] &&
           ALLOWED_USERS[user].pwd === password &&
           ALLOWED_USERS[user].isValid() ||
           'Whateva';
}

Now you can go even further and have multiple validity checks for example:

function isMorning () { ... }
function isSallyoffline () { ... }

function signIn(user, password) {
    const ALLOWED_USERS = {
      'bob': {
        pwd: '',
        validation: [
          () => true,
        ],
      },
      'sally': {
        pwd: 'gitIsCool7',
        validation: [
          () => isMorning,
        ],
      },
      'jerry': {
        pwd: 'hackme123',
        validation: [
          () => isMorning,
          () => isSallyoffline,
        ],
      },
    };

    return ALLOWED_USERS[user] &&
               ALLOWED_USERS[user].pwd === password &&
               ALLOWED_USERS[user].validation.every(rule => rule()) ||
               'Whateva';
}

And sorry for jumping in like so in the thread, I just know that plenty of people are for some reason struggling with this approach and I found this example intriguing. Also want to add that there is no practical way to completely avoid if/else statements, I use both approaches in my every day coding, it's just a matter of improving readability and removing code duplication.

If there's a simple 0 and 1 check, I see no reason to use a lookup map for that case, I'd just write down a simple if.

Rishav Jadon • Oct 16 '21

This comment, and example is the best to explain the concept, thanks for this!

naveennamani • Oct 16 '21

@davidlazic are you saying i should replace

a===10

with

example('a', a)

sure those are equivalent, but what above the functionality that i intended to run in the if condition, should I wrap them in anonymous functions and pass to another function. What about the else if condition? Should I call that like

if(example('b', b))

?
If all conditions has some common logic you can use mapping to bring the variability into the object and using the mapped values to execute the logic. But again, even if slight deviation is added (for example a console log in a single else if condition) then your common logic is not common anymore, and you have to add more hacks like anonymous functions as part of the mapping object and so on, as you just demonstrated in your example with validation functions.

The best practical example would be state management in redux, where switch case statements seems to be most efficient, readable and manageable, try implementing that with mapping.

David Lazic • Oct 18 '21

Hey @naveennamani , appreciate the time you've taken to think about this. My comment was a reply, not a statement, where I simply described how a specific problem could be written in a different kind of way with an example. Like I wrote, I use if/else, switch and this kind of approach on every day basis, based on the situation. If a function is supplied with too much logic, there's probably something that's gonna go wrong and it could be split into separate pure parts.

FJones • Oct 15 '21

Are we just going to skip over the fact that switch exists? Lookup maps have neat uses, sure, but declaring a best practice for something without mentioning the intended language construct for it is a bit silly.

Hassan • Oct 15 '21 • Edited

Good point, and thanks for sharing. But I think it only depends on the case you are working on. if/else can be easily abused as of any other tool. So I think we should really know our tools, and pick the right one for the job.

Thanks for sharing again, keep it up

Firoz Ansari • Oct 15 '21

You probably don't even need any else if you go with the bouncer design pattern.

function whoIsThis(character) {
    if (character.toLowerCase() === 'naruto') {
        return `Hokage`
    } 
    if (character.toLowerCase() === 'sasuke') {
        return `Konoha's Strongest Ninja`
    }    
    if (character.toLowerCase() === 'isshiki') {
        return `Otsutsuki being`
    } 
    if (character.toLowerCase() === 'boruto') {
        return `Naruto and Hinata's son`
    }
}

dikamilo • Oct 20 '21

I will still prefer switch here:

const whoIsThis = character => {
    switch(character.toLowerCase()) {
        case 'naruto':
            return `Hokage`
        case 'sasuke':
            return `Konoha's Strongest Ninja`
        case 'isshiki':
            return `Otsutsuki being`
        case 'isshborutoiki':
            return `Naruto and Hinata's son`
    }
}

or object literals

const whoIsThis = character => ({
    'naruto': 'Hokage',
    'sasuke': 'Konoha\'s Strongest Ninja.',
    'isshiki': 'Otsutsuki being.',
    'isshborutoiki': 'Naruto and Hinata\'s son'
  })[character]

Serhii Vasylenko • Oct 15 '21

Despite the somewhere click-bait nature of the heading, I can’t help agreeing that a map sometimes looks like a better alternative for the “if/else” in terms of performance. Thanks for pointing on that!

DB • Oct 21 '21 • Edited

Using an object doesn't mean that you're doing OOP.
else if and Map both work for your case, but they're not interchangeable in general - one is a control structure and the other one is a data structure.
else if is not inherently bad, it can be the most precise solution for some specific problems.
The only thing you should actually stop is posting articles talking about "absolute" truths.

Rishav Jadon • Oct 21 '21

it's not just using an object, it's the context in which you use it, so there's no need to say this isn't OOP, yes I gave a small example but you can see there are examples in the comments supporting the idea.
of course they're not fully interchangeable but in certain cases they are.
No one said it's bad, it's just better to use other alternatives where everything is being repeated.

Michael Currin • Oct 16 '21

I suggest watching videos or looking at the blog of Uncle Bob, the Clean Coder. He also supports this view.

He suggests another solution - polymorphism. Not needed for a simple case of matching string results but if you had more complex logic it would be worth making classes which all implement the same method. And then you pass in a class instance to a function and it calls the method of the class - no need for if statement or keylookup.

It's possible too outside of classes - but probably requires type system from TypeScript and overloading function so you call a variation of a function depending what type you pass in.

thecodingcrow • Oct 18 '21 • Edited

neat approach to improving readability (and apparently also efficiency), I like!

small suggestion from my point of view, you called the valid characters object listOfCharacters but I would rather go with validCharacters or sth similiar. Since the variable is technically not a list

Luís Assunção • Oct 18 '21 • Edited

Sorry, but I don't agree at least with your example. Why not a switch case?

Rishav Jadon • Oct 19 '21

That would also be almost like if else.

Luís Assunção • Oct 19 '21

Almost how? Did you meseare the performance? Can you be more specific?

Andrei Dascalu • Oct 16 '21

well ... not really. There's the so-called object notation in JS and the definition of an object as per OOP, which on a higher level is the data represented + methods (any methods, regardless whether you implement encapsulation or not). An "object" { "foo": "bar" }; might be called an object in JS notation, but no in OOP as it lacks methods and a definition (eg: a class of which the object should be an instance of).

Rishav Jadon • Oct 16 '21

Well if you're going that deep, you should know that JavaScript is a prototype based object oriented language, rather than class based, but it still is object oriented, so technically yeah an object is js is an object in OOP

Andrei Dascalu • Oct 16 '21

As long as you also define methods on the prototype, yes. Object oriented isn't just "call stuff objects". The core of OOP is the communication between objects, regardless of how they are implemented. Encapsulation, inheritance/composition, etc. JS very much an OOP language, but if it's not an instantiated structure according to the definition, it's not an OOP object.

new/bird • Oct 20 '21

good,jobs. This idea is very good. Dictionary way, okay. The usage scenario in this way is to switch between different branches according to the incoming value. At that time, if you don’t pass in a value, you need to switch to a different branch, how to do ?

Tal Rofe • Oct 14 '21

I don't think replacing "if"/"else if"/"else" conditions with yours is the best.
There is reason we use these known conditions nowadays. It is easy to read. But you are right, it is not always easy to read. I would replace your so-called bad code (the first one of-course) with code which uses only "if" conditions. There is no need to use "else if" when the "if" ones would execute "return" statements.

Daniel Gomez • Nov 26 '21

Can you share why would this be more readable/maintainable? I'm worried about you saying that this is "more readable and maintainable" without giving quality arguments about why that's true, that may let people believe that this is a must always.

I just went into a discussion about this topic, and some people argue that:

const condition = true

const value = {
   false: "first",
   true: "second
}[condition]

Is better than a simple if like:

const value = condition? "first" : "second"

This is an abuse/overuse of a language feature or structure which involves more concepts and more time on your brain in order to understand what is happening when you read it.

I also believe that this enlarge possible problems in devs minds like "Primitive types obsession" and "Declarative Dilussion", check:

WDYT?

Shai Almog • Oct 15 '21

The sample above doesn't need else since it returns... That's a pet peeve of mine...

Charlène Bonnardeaux • Oct 18 '21

Thanks for the tips today at work I remember I’ve see your article and that’s save my code of a bunch of if/else. ;)

Rishav Jadon • Oct 18 '21

I'm glad it helped, thank u :)

Oluwatobi • Oct 16 '21

Stop telling me what to do

Rishav Jadon • Oct 16 '21

Stop telling me to stop telling you what to do.

Oluwatobi • Oct 16 '21

😂😂😂😂😂😂😂 This is a good one ! Nice article mate.

Danny Engelman • Oct 20 '21

Interesting.. no one mentions the Minification proces, and how that optimizes your code.

Jim Stockwell • Oct 14 '21

Your improved version really is a lot nicer. Thank you for sharing the lesson.

Rishav Jadon • Oct 14 '21

Thanks a lot for reading!

Saroj Padhan • Oct 20 '21

Thank you

Rishav Jadon • Oct 14 '21

Thanks Michael, yes the comments are filled with useless people just wanting attention. Still thinking about this and surely will provide a better version in the future!

Rishav Jadon • Oct 15 '21 • Edited

Thanks Francisco for saying that. I didn't want to give him any attention so it's nice someone actually said the right thing. I don't like to indulge in unnecessary arguments 😂

Piotr Lewandowski • Oct 15 '21

"I find it disrespectful to treat someone who is sharing their knowledge freely and voluntarily" - it's even more disrespectful when the knowledge you share is misleading and shows lack of experience. Just because you worked 3 months as a web dev and you have internet access doesn't mean you have to immediately start a blog. Plenty of bullshit articles here and everywhere in the net from people who has half of Todo tutorial as their experience. It's not just disrespectful, it's insulting. Insulting to those, who spend years and years on learning and gaining experience, and trying to share REAL and adequate knowledge. Maybe, just maybe, 3 months is not enough to pretend you know enough to teach other people, especially when you yourself still showing that you have a lot to learn. Because sharing no knowledge is better that sharing bad knowledge.

By the way: that "website which only has a white background with blue text" (at least I put some colours contrary to yours) pays my bills and help me live comfortable life (well, actually portfolio built over ~20 years which is available for clients upon asking), so, "with all due respect", but yeah, don't really care what YOU think about my dummy boilerplate personal website ;)

Comment marked as low quality/non-constructive by the community. View Code of Conduct

Rishav Jadon • Oct 15 '21

Oh it's very disrespectful to you, is it?
Did my article hurt you? Why you so frustrated man? Considering your age, you should be playing with ur grandkids instead of commenting shitty things on some junior Dev's article. Now go back to doing whatever the hell u do n stop ruining my post.

Piotr Lewandowski • Oct 15 '21 • Edited

" stop ruining my post" - you ruined it yourself showing lack of understanding of what you write about (which is even more apparent in your replies to some of the comments". Accept criticism, learn from it, instead of pretending you know more than you do. Don't be example of Dunning–Kruger Effect diagram ;)
Also: if you don't like people criticising and commenting on your posts, there's an easy solution: don't publish ;)

Rishav Jadon • Oct 15 '21

"Lack of understanding". Learn English first @piotrlewandowski

Some comments have been hidden by the post's author - find out more