How To Iterate Over Enums In TypeScript?

When working on TypeScript applications, especially those involving fixed sets of related values like states, cities, or user roles, enums become an essential tool for writing maintainable code.

Recently, while working on a project for a US-based company, I encountered a requirement to loop through enum values to display options in a UI dynamically. For this, I explored various techniques for iterating over enums in TypeScript, whether they’re numeric, string-based, or a mix of both.

In this TypeScript tutorial, I’ll explain how to iterate over enums using built-in methods like Object.keys(), Object.values(), and Object.entries().

Table of Contents

Understand Enums in TypeScript

Before we dive into iterating over enums, let’s briefly discuss what enums are in TypeScript. Enums, short for “enumerations,” allow you to define a set of named constants. They provide a way to give friendly names to numeric or string values, making your code more readable and maintainable.

In TypeScript, you can define an enum using the enum keyword followed by the enum name and its members. For example:

enum USState {
  California,
  Texas,
  Florida,
  NewYork
}

By default, enum members are assigned numeric values starting from 0. However, you can also assign custom values to enum members.

Check out: Check Enum Equality in TypeScript

Iterate Over Numeric Enums

When working with numeric enums, you can use the Object.values() method to iterate over the enum values. The Object.values() method returns an array of the enum’s values, which you can then loop through using various iteration methods.

Here’s an example that demonstrates iterating over a numeric enum using Object.values():

enum USState {
  California,
  Texas,
  Florida,
  NewYork
}

const stateValues = Object.values(USState);
for (const value of stateValues) {
  console.log(value);
}

In this example, we define a USState enum with four members. We then use Object.values(USState) to get an array of the enum values. Finally, we use a for…of loop to iterate over the values and log them to the console.

Output:

Iterate Over String Enums

String enums allow you to assign string values to enum members. To iterate over string enum values, you can use the Object.values() method, just like with numeric enums.

Here’s an example that shows how to iterate over a string enum:

enum USPresident {
  Washington = 'George Washington',
  Lincoln = 'Abraham Lincoln',
  Roosevelt = 'Theodore Roosevelt',
  Kennedy = 'John F. Kennedy'
}

const presidentValues = Object.values(USPresident);

for (const value of presidentValues) {
  console.log(value);
}

In this case, we define a USPresident enum with string values assigned to each member. We use Object.values(USPresident) to get an array of the enum values and then iterate over them using a for…of loop.

Output:

Check out: Check if an Object is Empty in TypeScript

Iterate Over Heterogeneous Enums

TypeScript also supports heterogeneous enums, which allow you to mix string and numeric values within the same enum. When iterating over heterogeneous enums, you can use the Object.entries() method to get an array of key-value pairs.

Here’s an example that demonstrates iterating over a heterogeneous enum:

enum USSport {
  Football = 'American Football',
  Basketball = 1,
  Baseball = 'Baseball',
  Hockey = 3
}

const sportEntries = Object.entries(USSport);

for (const [key, value] of sportEntries) {
  console.log(`${key}: ${value}`);
}

In this example, we define a USSport enum with a mix of string and numeric values. We use Object.entries(USSport) to get an array of key-value pairs, where each pair is an array with the enum member name as the first element and its corresponding value as the second element.

We then use a for…of loop with destructuring to iterate over the key-value pairs and log them to the console.

The output will be:

Iterate Over Heterogeneous Enums in TypeScript

Convert Enums to Arrays in TypeScript

Another approach to iterating over enums is to convert them to arrays. You can use the Object.keys() or Object.values() method to get an array of enum keys or values, respectively.

Here’s an example that converts an enum to an array of values:

enum USCity {
  NewYork = 'New York',
  LosAngeles = 'Los Angeles',
  Chicago = 'Chicago',
  Houston = 'Houston'
}

const cityArray = Object.values(USCity);

for (const city of cityArray) {
  console.log(city);
}

In this example, we define a USCity enum with string values. We use Object.values(USCity) to convert the enum to an array of values. Then, we iterate over the array using a for…of loop and log each city to the console.

The output will be:

Converting Enums to Arrays in TypeScript

Check out: Get Enum Key by Value in TypeScript

Iterate Over Enum Keys in TypeScript

If you need to iterate over the keys of an enum instead of the values, you can use the Object.keys() method. This method returns an array of the enum member names.

Here’s an example that demonstrates iterating over enum keys:

enum USHoliday {
  NewYear = 'New Year\'s Day',
  IndependenceDay = 'Independence Day',
  Thanksgiving = 'Thanksgiving',
  Christmas = 'Christmas Day'
}

const holidayKeys = Object.keys(USHoliday);

for (const key of holidayKeys) {
  console.log(key);
}

In this example, we define a USHoliday enum with string values. We use Object.keys(USHoliday) to get an array of the enum keys. We then iterate over the keys using a for…of loop and log each key to the console.

The output will be:

Conclusion

In this tutorial, we explored various ways to iterate over enums in TypeScript. We learned how to iterate over numeric enums, string enums, and heterogeneous enums using methods like Object.values(), Object.entries(), and Object.keys(). We also discussed converting enums to arrays for iteration purposes.

By understanding these techniques, you can effectively work with enums in your TypeScript projects and perform operations that require iterating over enum values or keys.