How to Iterate over Enums in TypeScript

avatar

Borislav Hadzhiev

Mon Feb 14 20222 min read

banner

Photo by Meiying Ng

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.

Enums in TypeScript 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 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
// ✅ 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.

Note that the examples above would not work if you use const enums, because const enums can only use constant enum expressions and are completely removed during compilation.

Use the search field on my Home Page to filter through my more than 1,000 articles.