How to Create and Use Enums in JavaScript (Not TypeScript)

This article will show you how to create and consume Enums in JavaScript. Unfortunately, javaScript does not include native support for Enums, but you can add comparable functionality yourself.

Note that TypeScript, a language that builds on JavaScript, does include support for Enums natively. So we’re only looking at plain JavaScript here – not TypeScript.

What is an Enum?

An Enum (Enumerated Type) is a data structure containing multiple values. Each value is assigned to an identifier – and can be accessed by that identifier.

Enums contain pre-defined constants that aren’t expected to change (they’ll be the same when the application is written and when it is run so that you can always refer to the data in the enum by the same identifier and get the same value).

JavaScript Object.freeze() method

So, without native support for Enums, how do we use Enums?

Given what an Enum is – an unchanging set of key/value pairs, we can create an object (which can contain a set of key-value pairs) – and then freeze it using Object.freeze (making it unchanging). Thus, both of the main attributes of an enum are satisfied!

// Declare a constant called Month, containing our Enum
const Month = {
    JAN: 1,
    FEB: 2,
    MAR: 3
};

// Freeze it! It now can't be changed
Object.freeze(Month);

// Assign a value from the Enum to a variable to test it
let thisMonth = Month.MAR;
console.log(thisMonth); # Outputs 3 - the value of MAR in the Enum

// Trying to add a new member to the Enum will fail - but no error is produced.  The object is just frozen and won't be modified.
Month.APR = 4;
console.log(Month) # Will return the original frozen Month Enum - APR will not be included

Simple! Enums can contain any value – any variable – strings, numbers, objects, boolean values, etc.

You can access the values in the enum by the attribute name as you would with any other kind of JavaScript object.

Why use an Enum?

There are a few reasons why you might want to do this:

• As the values of an Enum are predefined, you can enforce the values of certain values. If the value is assigned from an Enum, it can only be one of the pre-approved values.
  • Especially useful when you’re working with user input and want to make sure that the user has selected a valid option
• Reduce the size of data stored in a file or database. For example, your Enum could contain complex or lengthy data – but because it’s not going to change, you can store the name of the Enum member in the database rather than storing the whole value – then when your application loads next, it just has to read the name, and can then look it up in the Enum to get the full value.
• You might come up with your own reasons for using it once you start building your own apps – I have no idea what you’re going to get up to!