DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Stop using switches the wrong way, use this instead
Bernardo Torres
Bernardo Torres

Posted on • Updated on

Stop using switches the wrong way, use this instead

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

Top comments (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

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

Collapse
 
thepeoplesbourgeois profile image
Josh • Edited on

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

We are hiring! Do you want to be our Senior Platform Engineer? Are you capable of chipping in across sysadmin, ops, and site reliability work, while supporting the open source stack that runs DEV and other communities?

This role might just be for you!

Apply now