How to use enums in JavaScript

John on September 12, 2020

Enums are used to represent a number of fixed values that can be evaluated. Unfortunately, there is no native JavaScript function for enums though there are ways we can define a set of enumerable values that will remain useable throughout a program.

Two enum values

The easiest way to implement enums in JavaScript is in situations where only two values need to be checked. We can use boolean true or false to do one thing or another. Let's take a look at how we can apply boolean enum values in an if statement.

let result = false;

if (result) {
  // do something if true
  console.log(result);
}

if (!result) {
  // do something if not true
  console.log(result);
}

false

More than two enum Values

Obviously boolean is out of the question when working with more than two values that need to be evaluated. Let's have a look at the “old-school” way of doing something depending on the day of the week with switch case.

let day = 'friday';

switch(day) {
  case 'monday':
    // do something
    break;
  case 'tuesday':
    // do something
    break;
  case 'wednesday':
    // do something
    break;
  case 'thrsday':
    // do something
    break;
  case 'friday':
    // do something
    break;
  case 'saturday':
    // do something
    break;
  case 'sunday':
    // do something
    break;
}

The above example is what should be avoided. The reason for this is on each case we are checking a hardcoded string, which of course leaves room for human error, especially if such a check has to be used many times in a large program.

Enum with Objects

We can implement the same solution as above in a more robust way by creating an enum object. An object uses key/value pairs meaning we only need to store the values in one place and enumerate values VIA their keys.

const days = {
  MONDAY: 'monday',
  TUESDAY: 'tuesday',
  WEDNESDAY: 'wednesday',
  THURSDAY: 'thursday',
  FRIDAY: 'friday',
  SATURDAY: 'saturday',
  SUNDAY: 'sunday'
}

let day = days.TUESDAY

switch(day) {
  case days.MONDAY:
    // do something
    break;
  case days.TUESDAY:
    // do something
    break;    
  case days.WEDNESDAY:
    // do something
    break;
  case days.THURSDAY:
    // do something
    break;
  case days.FRIDAY:
    // do something
    break;
  case days.SATURDAY:
    // do something
    break;
  case days.SUNDAY:
    // do something
    break;
}

Enum with Namespaces

Enums can be organised into a hierarchy by nesting objects within objects. Let's have a look at how we could embed morning, afternoon and evening enums into each day of the week enum.

const days = {
  MONDAY: {
    MORNING: 'terrible',
    AFTERNOON: 'ok',
    EVENING: 'chilled'
  },
  TUESDAY: {
    MORNING: 'better',
    AFTERNOON: 'good',
    EVENING: 'chilled'
  }
}

let part_of_day = days.MONDAY.MORNING;

switch(part_of_day) {
  case days.MONDAY.MORNING:
    // do something
    break;  
  case days.MONDAY.AFTERNOON:
    // do something
    break;
  case days.MONDAY.EVENING:
    // do something
    break;
  case days.TUESDAY.MORNING:
    // do something
    break;
  //... etc etc
}

Make Enums Immutable

To ensure that your enum object does not get manipulated you can use the Object.freeze() method. This is considered best practice.

const days = {
  MONDAY: 'monday',
  TUESDAY: 'tuesday'
}

Object.freeze(days)

Conclusion

You now know why enums should be used over hardcoding and that they can be implemented effectively with objects.