DEV Community

Cover image for Enums in JavaScript
Marcos Molina
Marcos Molina

Posted on • Updated on

Enums in JavaScript

Prologue

A few words about me

My name is Marcos Molina, a passionate Web Developer based in Israel.

What is my goal?

Sharing knowledge, the purpose of each of my posts is to share a solution to a real problem I faced in the industry, side projects, or open-source contributions.

Why?

Because seeing real examples always have helped me more than "To-Do List" examples.

Content

Enums?

They are a data type that allows us to specify a list of values for a type.
In my side project "Askii" that allows users to answer questions, send it to their friend and see all the answers I used enums for "type" all the possible kinds of questions.
Binary question: Yes or No.
Numeric questions: 1 ,2, etc.
Text questions: Yes, I do love coffee.

What they do?

They force you to think about all the possible values that a variable can take.
Once I create an enum on my project, I know that I need to handle three different scenarios in the front-end and in the back-end: binary, numeric, and text questions.

Enums vs list of numbers.

Enums are a constant rather than a list of numbers, increasing the readability of the code.
*This point will be demonstrated in the code example.

When should we use enums?

We should use enums if there are a definite number of fixed values for a variable.

How enums can be implemented?

JavaScript doesn't support enums "built-in", therefore there are some ways to implement them.

Let's build the solution
Note: by convention we use Uppercase letters, written 'binary' but should be 'BINARY'
Alt text of image

Edit 1:
Jon Randi wrote and I think he is right:
"Might be better to just do"**

const checkAnswerType = type => answerTypeEnum.hasOwnProperty(type)
Enter fullscreen mode Exit fullscreen mode

Edit 2:
mao.zheng wrote that he prefers the next syntax:

const Color = Object.freeze({
    RED  :  Symbol("red"),
    BLUE :  Symbol("blue"),
    GREEN:  Symbol("green")
}); 
Enter fullscreen mode Exit fullscreen mode

Why?

"Because this will force you to use the enum object defined above. you can't just use string(number) literal to make a comparison. It keeps the consistency of the codes your wrote"

Edit 3:
It is also possible to use numbers as values, actually is the default values in others programming languages.

const IssueStatusesEnum= Object.freeze({
    OPEN :  0,
    CLOSED:  1
}); 
Enter fullscreen mode Exit fullscreen mode

Summary

With the presented solution, the power of enums can be achieved as there is in some programming languages. For example TypeScript, Java, and C#.

I hope I could share with you some knowledge.
Did you learn something new ? Let me know in the comments. ❤️
Do you know another solution? 👆🏽
Did you love ? Share it with your friends. 👏🏽
Don't be afraid to post your thoughts. I'm here to learn from you. 😇
Networking? LinkedIn 🤝🏽

const moodsEnum = Object.freeze({ 
  GOOD : 'GOOD',
  AMAZING : 'AMAZING',
  SATISFACTORY: 'SATISFACTORY',
  ...
}
Enter fullscreen mode Exit fullscreen mode

Thank you for reading.
Have an moodsEnum.AMAZING day!

Top comments (10)

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Might be better to just do:

const checkAnswerType = type => answerTypeEnum.hasOwnProperty(type)
Enter fullscreen mode Exit fullscreen mode
Collapse
 
marcosmol204 profile image
Marcos Molina

Hi Jon,
Thank you for the comment, I am adding it to the post.
What do you think about the proposed solution ?

Collapse
 
zhengmao profile image
mao.zheng

I perfer to using Symbol as enums.

Collapse
 
marcosmol204 profile image
Marcos Molina

Can you attach some example :)?

Collapse
 
zhengmao profile image
mao.zheng

it's just like this:

const Color = Object.freeze({
    RED  :  Symbol("red"),
    BLUE :  Symbol("blue"),
    GREEN:  Symbol("green")
});
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
marcosmol204 profile image
Marcos Molina

Why do you prefer? Could you explain ?

Thread Thread
 
zhengmao profile image
mao.zheng

Because this will force you to use the enum object defined above. you can't just use string(number) literal to make a comparison. It keeps the consistency of the codes your wrote

Thread Thread
 
marcosmol204 profile image
Marcos Molina

Can you write an example ?
Using the enum, checking if a color is a valid color in the enum ?

Collapse
 
eliseogarcia1024 profile image
EliseoGarcia1024

Well done

Collapse
 
marcosmol204 profile image
Marcos Molina

Thank you very much :)