DEV Community

loading...
Cover image for Stop using switches the wrong way, use this instead

Stop using switches the wrong way, use this instead

Bernardo Torres
Software Engineer, Freelancer & Design passionate
Updated on ・2 min read

Introduction

1.png

In this example we have a 'color' variable and a 'colorPsychology' variable, 'colorPsychology' will be assigned a string depending of the value of 'color', so in this case a switch statement works fine. The problem is that since we're just executing one line of code, it ends up being unnecessary long, so we could use a different approach. Lets see

Using an object instead

2.png

A good approach would be using an object where the keys are the names of the color and the values are their respective color psychology

The value assignment of 'colorPsychology' could be a little confusing, but here's what's happening:

  1. the colorPsychology variable is created
  2. JS looks for the the value of the key color in our colorPsyOptions object
  3. since the key is the color variable and this contains a string 'blue', JS will look for the value of the 'blue' key in our object
  4. If the 'color' variable contains a value that doesn't isn't a key in our object, it will assign a string 'unknow'

Don't understand objects yet? check the MDN docs

Using an array when using numbers

In case we're using numbers as keys, we could use a shorter version with an array, like this:

Instead of using this:
3.png

We can do something like this:
4.png

When to use these approaches

When you're just assigning values in the switch statement

Exercises

Replace the following switch statements with the previous approach

You can use playcode

Fruit names translation

5.png

Planet names

7.png

Results

Exercise 1

6.png

Exercise 2

8.png

I hope this was useful to you and consider following me on Twitter as @BernardoT0rres, I'll be posting daily JavaScript content there

Discussion (3)

Collapse
jamesthomson profile image
James Thomson

Your first code image switch statement uses colorPsychology when it should use color as the condition. Other than that, it's a good approach when your switch statement produces basic results 👍

My only other suggestion to your article would be to use actual code snippets instead of screenshots so readers with assistive technology can benefit.

Collapse
pallascodes profile image
Bernardo Torres Author

Oohh no, I uploaded the wrong image. Hahahah thanks for the comment

Collapse
thepeoplesbourgeois profile image
Josh • Edited

You can also use this approach to break more complex switch cases into object functions, allowing you to turn this

switch (fruit) {
  case 'banana':
    document.body.style.backgroundColor = 'yellow';
    ...
    break;
  case 'grape':
    document.body.style.backgroundColor = 'purple';
    document.body.style.color = 'white';
    ...
    break;
  ...
}
Enter fullscreen mode Exit fullscreen mode

into this

const fruitThemes = {
  set_banana() {
    document.body.style.backgroundColor = 'yellow';
    ...
  },
  set_grape() {
    document.body.style.backgroundColor = 'purple';
    document.body.style.color = 'white';
    ...
  },
  ...
}

fruitThemes[`set_${fruit}`]?.()
Enter fullscreen mode Exit fullscreen mode