Article Categories

Selected Reading

Explain Enumerated Types in JavaScript.

Javascript Web Development Object Oriented Programming

JavaScript doesn't support enums natively like other programming languages. However, you can implement enumerated types using objects to create named constants for better code readability and maintainability.

Basic Enum Implementation

The simplest way to create an enum is using a plain object with numeric values:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Enums</title>
</head>
<body>
    <h1>Enumerated Types in JavaScript</h1>
    <div id="result"></div>
    <button onclick="showColors()">Show Color Values</button>

    <script>
        // Basic enum using object
        const Color = {
            RED: 1,
            GREEN: 2,
            BLUE: 3,
            YELLOW: 4,
            ORANGE: 5
        };

        function showColors() {
            const resultDiv = document.getElementById('result');
            resultDiv.innerHTML = `
                <h3>Color Enum Values:</h3>
                <p>Color.RED = ${Color.RED}</p>
                <p>Color.GREEN = ${Color.GREEN}</p>
                <p>Color.BLUE = ${Color.BLUE}</p>
                <p>Color.YELLOW = ${Color.YELLOW}</p>
                <p>Color.ORANGE = ${Color.ORANGE}</p>
            `;
        }
    </script>
</body>
</html>

Color Enum Values:
Color.RED = 1
Color.GREEN = 2
Color.BLUE = 3
Color.YELLOW = 4
Color.ORANGE = 5

String-Based Enums

You can also create enums with string values for better readability:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>String Enums</title>
</head>
<body>
    <h1>String-Based Enums</h1>
    <div id="output"></div>
    <button onclick="demonstrateStringEnum()">Show String Enum</button>

    <script>
        const Status = {
            PENDING: 'pending',
            APPROVED: 'approved',
            REJECTED: 'rejected'
        };

        function demonstrateStringEnum() {
            const outputDiv = document.getElementById('output');
            outputDiv.innerHTML = `
                <h3>Status Enum:</h3>
                <p>Status.PENDING = "${Status.PENDING}"</p>
                <p>Status.APPROVED = "${Status.APPROVED}"</p>
                <p>Status.REJECTED = "${Status.REJECTED}"</p>
                <br>
                <p>Current status: ${Status.PENDING}</p>
            `;
        }
    </script>
</body>
</html>

Status Enum:
Status.PENDING = "pending"
Status.APPROVED = "approved"
Status.REJECTED = "rejected"

Current status: pending

Immutable Enums with Object.freeze()

To prevent modification of enum values, use Object.freeze():

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Immutable Enums</title>
</head>
<body>
    <h1>Immutable Enums</h1>
    <div id="demo"></div>
    <button onclick="testImmutableEnum()">Test Immutable Enum</button>

    <script>
        const Direction = Object.freeze({
            NORTH: 'north',
            SOUTH: 'south',
            EAST: 'east',
            WEST: 'west'
        });

        function testImmutableEnum() {
            const demoDiv = document.getElementById('demo');
            
            // Try to modify the enum (this will fail silently)
            Direction.NORTH = 'modified';
            
            demoDiv.innerHTML = `
                <h3>Immutable Enum Test:</h3>
                <p>Direction.NORTH = "${Direction.NORTH}" (unchanged)</p>
                <p>Direction.SOUTH = "${Direction.SOUTH}"</p>
                <p>Direction.EAST = "${Direction.EAST}"</p>
                <p>Direction.WEST = "${Direction.WEST}"</p>
                <p><em>Values cannot be modified due to Object.freeze()</em></p>
            `;
        }
    </script>
</body>
</html>

Immutable Enum Test:
Direction.NORTH = "north" (unchanged)
Direction.SOUTH = "south"
Direction.EAST = "east"
Direction.WEST = "west"
Values cannot be modified due to Object.freeze()

Comparison of Enum Approaches

Approach	Immutable	Type	Best For
Plain Object	No	Number/String	Simple cases
Object.freeze()	Yes	Number/String	Production code
Symbols	Yes	Symbol	Unique values

Conclusion

While JavaScript lacks native enum support, objects provide an effective way to create enumerated types. Use Object.freeze() to make enums immutable and consider string values for better debugging and readability.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

200 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next