Enums in JavaScript

JavaScript, unlike many other programming languages, does not have built-in support for enums. However, this doesn't mean that we can't use enums in our JS code, which can be achieved using other methods. In this article we will explore different ways to achieve enums in JS using objects and classes.

First of all, what are enums and why are they useful? Enums, or enumerations, are a way to define a set of named constants. They can be used to represent a fixed set of values, such as the cardinal directions (i.e., North, East, South, West) or months of the year. Enums are great because they make our code more readable, and therefore maintainable, by providing a clear and concise way to represent a group of related values.

Objects as Enums

One way to achieve the use of enums in JS is to use objects. We can define an object with properties that correspond to the enum values and assign them a value. For example, let's say we want to define an enum for the days of the week. We can do this by creating an object like this:

const DaysOfWeek = {
    Monday: 1,
    Tuesday: 2,
    Wednesday: 3,
    Thursday: 4,
    Friday: 5,
    Saturday: 6,
    Sunday: 7
};

We can then use these properties in our code to represent the days of the week. For example, we can use the DaysOfWeek.Monday property to reference Monday.

Note that there are a few trade-offs you can make, like setting the value as a number (which, in this case, could correspond to the order of the days), or setting it to the name of the week, which is better for logging purposes but doesn't retain ordering information.

This is a very simple approach that is both easy to implement and use. Although it does have its limitations, like being able to edit the object properties.

Classes as Enums

Another way to achieve enums in JavaScript is to use classes. We can define a class with properties that correspond to the enum values and assign them a value. For example, let's say we want to define an enum for the seasons of the year. We can do this by creating a class like this:

Get free courses, guided projects, and more

No spam ever. Unsubscribe anytime. Read our Privacy Policy.

class Season {
    static Winter = 'Winter';
    static Spring = 'Spring';
    static Summer = 'Summer';
    static Fall = 'Fall';
}

You can then use these properties in our code to refer to any of the seasons. For example, we'd simply use Season.Summer to represent summer.

We can take this even further and create helper functions to both create the enums, as well as stringify them for comparison or logging. One advantage to the class-based approach is that our static properties can actually be instances of the enum class itself, which is more convenient than using a simple string.

class Season {
    static Winter = new Season('Winter');
    static Spring = new Season('Spring');
    static Summer = new Season('Summer');
    static Fall = new Season('Fall');

    constructor(name) {
        this.name = name;
    }

    toString() {
        return `Season.${this.name}`;
    }
}

The nice thing about both the object-based and class-based approaches is that we can do other meta operations on the enums, like getting a list of possible values or checking if a given enum is a valid value in the set.

> Object.keys(Season)
[ 'Winter', 'Spring', 'Summer', 'Fall' ] 

Conclusion

While JavaScript does not have native enum support, like many other languages do, we can still achieve the same functionality using other methods, like with objects and classes. These methods provide a clear and concise way to represent a group of related values, making our code more readable and maintainable. With objects and classes you still have the capability of using enums, which are a valuable tool for any JS developer to have in their toolbox.

Last Updated: June 22nd, 2023
Was this helpful?
Project

React State Management with Redux and Redux-Toolkit

# javascript# React

Coordinating state and keeping components in sync can be tricky. If components rely on the same data but do not communicate with each other when...

David Landup
Uchechukwu Azubuko
Details

© 2013-2024 Stack Abuse. All rights reserved.

AboutDisclosurePrivacyTerms