How to Iterate over Enums in TypeScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

Iterate over Enums in TypeScript #

To iterate over enums:

  1. Use the Object.keys() or Object.values() methods to get an array of the enum's keys or values.
  2. Filter out any unnecessary values.
  3. Use the forEach() method to iterate over the array.
index.ts
// ✅ For Numeric Enums enum Sizes2 { Small, Medium, Large, } const keys2 = Object.keys(Sizes2).filter((v) => isNaN(Number(v))); console.log(keys2); // 👉️ ['Small', 'Medium', 'Large'] keys2.forEach((key, index) => { // 👇️ Small, Medium, Large console.log(key); }); const values2 = Object.values(Sizes2).filter((v) => !isNaN(Number(v))); console.log(values2); // 👉️ [0, 1, 2] values2.forEach((value) => { // 👇️ 0, 1, 2 console.log(value); }); // ✅ For STRING Enums enum Sizes { Small = 'S', Medium = 'M', Large = 'L', } const keys1 = Object.keys(Sizes); console.log(keys1); // 👉️ ['Small', 'Medium', 'Large'] keys1.forEach((key, index) => { // 👇️ Small, Medium, Large console.log(key); }); const values1 = Object.values(Sizes); values1.forEach((value, index) => { // 👇️ S, M, L console.log(value); });
The code snippet shows 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
const obj = { name: 'Tom', age: 30 }; const keys = Object.keys(obj); console.log(keys); // 👉️ ['name', 'age'] const values = Object.values(obj); console.log(values); // 👉️ ['Tom', 30]

However, the output for numeric enums is different.

index.ts
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.

The examples 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
// ✅ For STRING Enums enum Sizes { Small = 'S', Medium = 'M', Large = 'L', } const keys1 = Object.keys(Sizes); console.log(keys1); // 👉️ ['Small', 'Medium', 'Large'] for (const key of keys1) { console.log(key); }

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
enum Sizes2 { Small, Medium, Large, } for (const value in Sizes2) { // 👇️ 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.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.