Alternatives to a large if/switch with multiple cases in JavaScript?

Question

I have multiple if statements (50/60) inside a loop.What would be the best approach to perform this actions, switch or map lookup? How can i implement map lockups for the following examples?

errors.forEach((e) => {
      if (e.field === 'firstName') {
        this.hasErrorFirstName = true;
        this.msgFirstName = e.error;
      }
      if (e.field === 'lastName') {
        this.hasErrorLastName = true;
        this.msgLastName = e.error;
      }
      if (e.field === 'middleName') {
        this.hasErrorMiddleName = true;
        this.msgMiddleName = e.error;
      }
      if (e.field === 'address') {
        this.hasErrorAddress = true;
        this.msgAddress = e.error;
      }
     }

Does this answer your question? [Javascript switch vs. if...else if...else](https://stackoverflow.com/questions/2922948/javascript-switch-vs-if-else-if-else) — Mukul Kumar Jha, May 04 '22 at 04:59
Is switch the best options or I can use map lookups. https://medium.com/front-end-weekly/switch-case-if-else-or-a-lookup-map-a-study-case-de1c801d944 — user2410266, May 04 '22 at 05:01
How can I implement map lookups for multiple statements with my example. — user2410266, May 04 '22 at 05:07

score 3 · Answer 1 · answered May 04 '22 at 05:03

3

You can do some thing like below

const obj = {
  firstName: ['hasErrorFirstName', 'msgFirstName'],
  lastName: ['hasErrorLastName', 'msgLastName'],
}

errors.forEach(e => {
  if (Object.keys(obj).includes(e.field)) {
    const [has, msg] = obj[e.field];
    this[has] = true;
    this[msg] = e.error
  }
})

answered May 04 '22 at 05:03

Siva K V

10,561
2
16
29

Looks like this is not a best practice to do as in this case also user have to write all the fields manually inside `obj`. – Debug Diva May 04 '22 at 07:05

score 1 · Answer 2 · answered May 04 '22 at 06:29

This indicates that data is stored in inefficient way. There may be no need to have separate hasErrorFirstName and msgFirstName keys, because error message can be forced to be truthy and be an indicator that there's an error. And there is no need to have keys that are named differently than respective fields. In this case an array can be mapped to a map of error messages:

Object.fromEntries(errors.map(e => [e.field, e.error]))

Alternatives to a large if/switch with multiple cases in JavaScript?

2 Answers2