Updated April 3, 2023
Introduction to JavaScript Enum
The enum in JavaScript is used to define set of same type constants in single entity. As it is used for constants, JavaScript used “const” keyword for achieving enum feature. As we know in standard programming convention constants are declared with all capital letters. This enum can be used for week days like {“SUNDAY, MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY, and SATURDAY”}, colors like {“BLUE, RED, YELLOW, PINK, GREEN” etc.}, seasons like {“SUMMER,AUTUMN or FALL, SPRING, WINTER”},directions {“EAST, WEST, NORTH, SOUTH, NORTH EAST, NORTH WEST, SOUTH EAST and SOUTH WEST”}
Why do we use the Enum Concept in JavaScript?
Actually enums are used for consider fixed number of values. Let suppose we have 2 possible values then we can use a boolean data type. Consider an example that if we want to show the pop up box in the application but that is only in summer then it will look like below.
Code:
let summer1= true;
let summer2=false;
if(summer1){
viewMyPopupBox()
}Now, let’s consider the same scenario in different way like if in our application we have 4 values for directions (EAST, WEST, NORTH, SOUTH). Let’s thought you don’t know about enums implementation in JavaScript then your conventional approach for this directions is same like in the first example summer scenario.
Example:
let direction= "east";
or let direction= "west";
or let direction= "north";
or let direction= "south";
switch(direction){
case:'east':
//Type your logic here
case 'West': //String spelling error
//Type your logic here
case 'north':
//Type your logic here
case 'south':
//Type your logic here
}If you observe carefully the above code then the problem with above implementation is highlighted in the above example that would be fail in case of “west” since we made spelling error in our switch-case statement but by mistake we have used the case as “West” instead. As it is very easy to fix the problem because we have only just few lines of code, let’s imagine if we have thousands of lines of code then it is really hard to fix the problem.
Now we will look into the above directions example with enum concept in JavaScript and see the efficiency.
Enum Constant with Objects
A better way to implement enum constant is by using object, lets see the below example.
Code:
const directions= {
EAST: 'east',
WEST: 'west',
NORTH: 'north',
SOUTH: 'south'
}
let directions=directions.SOUTH
if(!directions){
throw new Error('Direction is not there in the above enum')
}
switch(directions){
case: directions.EAST;
//Type your logic here
case: directions.WEST;
//Type your logic here
case: directions.NORTH;
//Type your logic here
case: directions.SOUTH;
//Type your logic here
}Now you can see in the above there is no chance to make any mistake because all constant always defined with capital letters only. So always follow that convention.
How does Enum work in JavaScript?
Enum constant in JavaScript can be worked with “const” keyword and this constants are always specified in capital letters only.
Syntax:
const enums=
{
CONSTANT: 'Value',
CONSTANT: 'Value',
CONSTANT: 'Value'
.
.
.
};
let con=enums.CONSTANT;
switch(con)
{
case con.CONSTATNT:
//Write logic for CONSTANT
.
.
.
}Examples to Implement JavaScript Enum
Below are the examples mentioned:
Example #1
Directions Enum
Code:
<!DOCTYPE html>
<html>
<body>
<script>
//declaring enum constant with directions variable
const directions = {
//assinging values to constants
EAST: 'east',
WEST: 'west',
NORTH: 'north',
SOUTH: 'south'
};
//Accessing single value to check with switch case
let direction=directions.SOUTH; //Line1
if(!direction){
throw new Error("<h1 style='color:red'>Direction is not there in the above enum</h1")
}
switch(direction){
case directions.EAST:
document.write("<h2 style='color:green'>Hi, I am EAST <h2><br>");
break;
case directions.WEST:
document.write("<h2 style='color:green'>Hi, I am WEST </h2><br>");
break;
case directions.NORTH:
document.write("<h2 style='color:green'>Hi, I am NORTH </h2<br>");
break;
case directions.SOUTH:
document.write("<h2 style='color:green'>Hi, I am SOUTH</h2> <br>");
}
</script>
</body>
</html>Output:
Change the SOUTH value of direction into HELLO in Line1.
Example #2
Colors enum
Code:
<!DOCTYPE html>
<html>
<body>
<script>
//declaring enum constant with colors variable
const colors = {
//assinging values to constants
RED: 'RED',
BLUE: 'BLUE',
GREEN: 'GREEN',
YELLOW: 'YELLOW',
PINK: 'PINK',
PURPLE: 'PURPLE',
ORANGE: 'ORANGE',
NAVY: 'NAVY'
};
//Accessing single value to check with switch case
let c=colors.GREEN; //Line1
if(!c){
throw new Error("<h1 style='color:red'>Color is not there in the above enum</h1")
}
document.write("<h2 style='border:solid 2px purple;text-align:center;color:brown'>Enum Constant with Colors</h2>");
//Swithch case for checking the color values and display the output
switch(c){
case colors.RED:
document.write("<h2 style='color:red'>I am giving RED color with red color font<h2><br>");
break; //break the condition here it self after executing the case
case colors.BLUE:
document.write("<h2 style='color:blue'>I am giving BLUE color with blue color font</h2><br>");
break;
case colors.GREEN:
document.write("<h2 style='color:green'>I am giving GREEN color with green color font</h2<br>");
break;
case colors.YELLOW:
document.write("<h2 style='color:yellow'>I am giving YELLOW color with yellow color font</h2> <br>");
case colors.PINK:
document.write("<h2 style='color:pink'>I am giving PINK color with pink color font</h2><br>");
break;
case colors.PURPLE:
document.write("<h2 style='color:purple'>I am giving PURPLE color with purple color font</h2<br>");
break;
default:
document.write("<h2 style='color:navy'>I am giving default color either navy or orange with navy color font</h2> <br>");
}
</script>
</body>
</html>Output:
Change the GREEN value of direction into BROWN in Line1.
Example #3
Week days Enum
Code:
<script>
//declaring enum constant with days variable
const days = {
//assinging values to constants
DAY:
{
SATURDAY:"SATURDAY SOFTWARE HOLIDAY",
SUNDAY:"SUNDAY SOFTWARE HOLIDAY"
},
MONDAY: 'Monday',
TUESDAY: 'Tuesday',
WEDNESDAY: 'Wednesday',
THURSDAY: 'Thursday',
FRIDAY: 'Friday'
};
//Accessing single value to check with switch case
let d=days.DAY.SATURDAY;//Line 1
if(!d){
throw new Error("<h1 style='color:red'>Day is not there in the above enum</h1")
}
document.write("<h2 style='border:solid 2px orange;text-align:center;color:green'>Enum Constant with Days</h2>");
//Swithch case for checking the color values and display the output
switch(d){
case days.MONDAY:
document.write("<h2 style='color:red'>I am 2nd day of the week<h2><br>");
break; //break the condition here it self after executing the case
case days.TUESDAY:
document.write("<h2 style='color:blue'>I am 3rd day of the week</h2><br>");
break;
case days.WEDNESDAY:
document.write("<h2 style='color:green'>I am 4th day of the week</h2<br>");
break;
case days.THURSDAY:
document.write("<h2 style='color:yellow'>I am 5th day of the week</h2> <br>");
case days.FRIDAY:
document.write("<h2 style='color:pink'>I am 6th day of the week</h2><br>");
break;
default:
document.write("<h2 style='color:navy'>Saturday=6th day and Sunday=1st day of the week and this 2 are holidays for software employees</h2> <br>");
}
</script>Output:
Change the SATURDAY value of direction into BEGIN in Line1
Conclusion
JavaScript enums are used to define multiple constants in a single entity. Const keyword is used for enums in JavaScript. This enum constants are always in capital letter only, this is not mandatory but standard convention in programming.
Recommended Articles
This is a guide to JavaScript Enum. Here we discuss an enum consept with objects, how does it works with examples for better understanding. You can also go through our other related articles to learn more –
