How to Iterate over Enums in TypeScript

# Iterate over Enums in TypeScript

To iterate over enums:

Use the Object.keys() or Object.values() methods to get an array of the enum's keys or values.
Filter out any unnecessary values.
Use the forEach() method to iterate over the array.

index.ts

Copied!
// ✅ For STRING Enums
enum Sizes {
  Small = 'S',
  Medium = 'M',
  Large = 'L',
}

const keys = Object.keys(Sizes);
console.log(keys); // 👉️ ['Small', 'Medium', 'Large']

keys.forEach((key, index) => {
  // 👇️ Small, Medium, Large
  console.log(key);
});

const values = Object.values(Sizes);

values.forEach((value, index) => {
  // 👇️ S, M, L
  console.log(value);
});

iterate over string enums in typescript

The code for this article is available on GitHub

If you work with numeric enums, use the following code sample instead.

index.ts

Copied!
// ✅ For Numeric Enums
enum Sizes {
  Small,
  Medium,
  Large,
}

const keys = Object.keys(Sizes).filter((v) => isNaN(Number(v)));
console.log(keys); // 👉️ ['Small', 'Medium', 'Large']

keys.forEach((key, index) => {
  // 👇️ Small, Medium, Large
  console.log(key);
});

const values = Object.values(Sizes).filter((v) => !isNaN(Number(v)));
console.log(values); // 👉️ [0, 1, 2]

values.forEach((value) => {
  // 👇️ 0, 1, 2
  console.log(value);
});

The code snippets show how to iterate over the keys and values of both - string and numeric enums.

Typescript enums are real objects and exist at runtime. This is why we are able to pass an enum to the Object.keys and Object.values methods.

The Object.keys() and Object.values() methods return an array containing the object's keys and values.

index.ts

Copied!
const obj = { name: 'bobby hadz', age: 30 };

const keys = Object.keys(obj);
console.log(keys); // 👉️ ['name', 'age']

const values = Object.values(obj);
console.log(values); // 👉️ ['bobby hadz', 30]

However, the output for numeric enums is different.

index.ts

Copied!
enum Sizes2 {
  Small,
  Medium,
  Large,
}

// 👇️ ['0', '1', '2', 'Small', 'Medium', 'Large']
console.log(Object.keys(Sizes2));

The output contains both the enum names and values. This is why we used the filter() method in the examples above - to filter out any unnecessary values from the array.

I've also written a detailed guide on how to use the map() method with Enums.

Want to learn more about using Enums in TypeScript? Check out these resources: Check if a Value exists in an Enum in TypeScript,Convert an Enum to a String or a Number in TypeScript.

# Iterate over Enums using a `for...of` loop

The examples above use the Array.forEach method to iterate over the enum keys and values. However, you could also use a simple for...of loop.

index.ts

Copied!
// ✅ For STRING Enums
enum Sizes {
  Small = 'S',
  Medium = 'M',
  Large = 'L',
}

const keys = Object.keys(Sizes);
console.log(keys); // 👉️ ['Small', 'Medium', 'Large']

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

const values = Object.values(Sizes);
console.log(values); // 👉️ [ 'S', 'M', 'L' ]

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

iterate over enums using for of loop

The code for this article is available on GitHub

Use the following code sample if you work with numeric enums.

index.ts

Copied!
enum Sizes {
  Small,
  Medium,
  Large,
}

const keys = Object.keys(Sizes).filter((v) => isNaN(Number(v)));
console.log(keys); // 👉️ ['Small', 'Medium', 'Large']

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

const values = Object.values(Sizes).filter((v) => !isNaN(Number(v)));
console.log(values); // 👉️ [0, 1, 2]

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

iterating over numeric enums with for of loop

The syntax for a for...of loop is a little more concise but you don't have access to the index like you do when using the forEach() method.

You might have seen a for...in loop being used to directly iterate over an enum.

index.ts

Copied!
enum Sizes {
  Small,
  Medium,
  Large,
}

for (const value in Sizes) {
  // 👇️ 0, 1, 2, Small, Medium, Large
  console.log(value);
}

However, this way you iterate over both - the enum values and keys, which is most likely not what you want.

The examples above wouldn't work if you use const enums.

Const enums can only use constant enum expressions and are completely removed during compilation.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to Iterate over Enums in TypeScript

# Iterate over Enums in TypeScript

# Iterate over Enums using a for...of loop

# Additional Resources

Borislav Hadzhiev

# Iterate over Enums using a `for...of` loop