Frontend Quick Tips #1 Map - How to Get Rid of 'If' Hell

Photo of Bernard Klatka

Bernard Klatka

Apr 13, 2021 • 2 min read
frontned quick tips

No one likes those big articles - that’s why we’re creating Quick Tips - short tips to change your developer's life from the moment you read them.

Those may be some patterns explained in JS code on real-life examples or some techniques for better code.


Sometimes you have logic that depends on many conditions/different states. You have to react differently If each condition is fulfilled.

Let's say that we have a form with sections. Each section has a different set of fields.

frontend quick tips

You get the idea. After a while you'll have quite a big set of ifs.


You can create a map for each type that has fields as values.

frontend quick tips

Let's see - we first declared a whole set of key:value pairs, so it's easy to read which section consists of which fields. If we would like to add an additional section, we could just add another key:value pair.

Below we are just using a simple object property to reach for the selected key with:

return sectionFields[sectionName] || [];

So we could have e.g.


which would just take an array from an object defined higher.

When to use it?

Whenever you see that the list of ifs could scale.

Photo of Bernard Klatka

More posts by this author

Bernard Klatka

How to build products fast?  We've just answered the question in our Digital Acceleration Editorial  Sign up to get access

We're Netguru!

At Netguru we specialize in designing, building, shipping and scaling beautiful, usable products with blazing-fast efficiency
Let's talk business!

Trusted by:

  • Vector-5
  • Babbel logo
  • Merc logo
  • Ikea logo
  • Volkswagen logo
  • UBS_Home