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'

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

const checkAnswerType = type => answerTypeEnum.hasOwnProperty(type)

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

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

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
}); 

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',
  ...
}

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

Comments

[Jon Randy 🎖️]

Might be better to just do:

const checkAnswerType = type => answerTypeEnum.hasOwnProperty(type)

[Marcos Molina]

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

[mao.zheng]

I perfer to using Symbol as enums.

[Marcos Molina]

Can you attach some example :)?

[mao.zheng]

it's just like this:

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

[Marcos Molina]

Why do you prefer? Could you explain ?

[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

[Marcos Molina]

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

[EliseoGarcia1024]

Well done

[Marcos Molina]

Thank you very much :)