Top 5 ways to iterate enum properties in typescript with examples?

Top 5 ways to iterate enum properties in typescript with examples?

Enum is an enumeration constant of names and values replacing multiple constants with a single namespace. There are many ways we can iterate enum-type data.

This blog post covers examples of looping the Enum strings or numbers using different approaches.

You can check my other posts on typescript Enum object.

How to Iterate keys and values using Object Inbuilt methods

An enum is also an object in Javascript. The Object class provides the following methods

  • The Object.keys() method returns an array of the keys of an object
  • The Object.values() method returns an array of values or properties of an object
  • The Object.entries() method returns Multimap of an enumeration, It is introduced in the latest Javascript language

let us declare Enum in javascript or typescript

export enum Status {
  ACTIVE = "active",
  INACTIVE = "inactive",
  PENDING = "pending",
  COMPLETED = "completed",
}

Defined Enum Status with four string constants ACTIVE,INACTIVE, PENDING, COMPLETED. Each Constant is assigned with a String value. Enum in Typescript only has String or Number values.

Use object.keys() to get Enum Keys with example

if you want to iterate keys of Enum type, Use object.keys() method.

const keys = Object.keys(Status);
console.log(keys); //[ 'ACTIVE', 'INACTIVE', 'PENDING', 'COMPLETED' ]
for (let key of keys) {
  console.log(key);
}

Use object.values() to get Enum values constants with an example

The Object.values() method returns an array of values for a given enum object.

In this example, It returns an array containing the values of an Enum object. Here type checking is not required as it gives the enum constants values directly.

An example of retrieving keys of an Enum

const values = Object.values(Status);
console.log(values); //[ 'active', 'inactive', 'pending', 'completed' ]
for (let value of values) {
  console.log(value);
}

Iterate keys and values using the Object.entries() method

Object.entries() method used to get key and value pairs of an Enum Object. It is used in a for loop to iterate Multiple Map keys and values of an enum. For each iteration, It returns entries that contain [key, value]

for (const [key, value] of Object.entries(Status)) {
  console.log(key, value);
}

Output:

[
  ["ACTIVE", "active"],
  ["INACTIVE", "inactive"],
  ["PENDING", "pending"],
  ["COMPLETED", "completed"],
];

Use for in loop to iterate properties of an Enum object

for in loop in Javascript, used to iterate properties of enumerable objects. However, Enum is not a simple object, it stores the key and value pair in both normal and reverse order. When for in loop is used, Iterates the keys and values of an Enum object.

Each property iterated and printed the property name and its value using Enum[property].

It contains all the properties, using typeof Status[element] === 'string' to filter only String types.

for (let element in Status) {
  if (typeof Status[element] === "string") {
    console.log(element + " - " + Status[element]);
  }
}

And the output:

ACTIVE - active;
INACTIVE - inactive;
PENDING - pending;
COMPLETED - completed;

Iterate enum using lodash forIn method

The forIn function in lodash is used to iterate the own enumerated properties of an object Since an enum is an object. forIn is used to iterate keys and values of an enum. Iterate each key and value pair and apply the call back for each iteration, It can take an object, callback value, and key pairs.

_.forIn(Status, function(value, key) {
    console.log(key +" - "+ value]);
});

Iterate properties of an Enum with no value

In the above examples, Enum is declared with property and its value and checked various approaches to do iteration.

Now we will see the list of enum strings that has no values.

export enum Status {
  ACTIVE,
  INACTIVE,
  PENDING,
  COMPLETED,
}
console.log(Status);

And enum object is printed in the below format,

{ '0': 'ACTIVE',
  '1': 'INACTIVE',
  '2': 'PENDING',
  '3': 'COMPLETED',
  ACTIVE: 0,
  INACTIVE: 1,
  PENDING: 2,
  COMPLETED: 3 }

loop each element of an object using for loop within the operator or object method check each element value is not a number and the isNan method.

const statuslist = Object.keys(Status).filter((element) => {
  return isNaN(Number(element));
});
console.log(statuslist);

for (let element in Status) {
  if (isNaN(Number(element))) {
    console.log(element);
  }
}

And output

["ACTIVE", "INACTIVE", "PENDING", "COMPLETED"];
ACTIVE;
INACTIVE;
PENDING;
COMPLETED;

Conclusion

Important note, Please check the type of Enum property before iterating over an Enum.

To Summarize, You learned how to iterate an enum key and values using the object lodash method.