Enum member access in Typescript - Step-by-Step Execution

Concept Flow - Enum member access

Define Enum

↓

Access Member by Name

↓

Get Member Value

↓

Use Value in Code

↓

Access Member by Value (Reverse Lookup)

↓

Get Member Name

↓

Use Name in Code

This flow shows how to define an enum, access its members by name to get values, and also access members by value to get names.

Execution Sample

Typescript

enum Color {
  Red = 1,
  Green,
  Blue
}

let c = Color.Green;
console.log(c);

Defines an enum Color with members, accesses the Green member, and prints its value.

Execution Table

Step	Action	Evaluation	Result
1	Define enum Color with Red=1, Green=2, Blue=3	N/A	Color = {1: 'Red', 2: 'Green', 3: 'Blue', Red: 1, Green: 2, Blue: 3}
2	Access Color.Green	Color.Green	2
3	Assign Color.Green to variable c	c = 2	c = 2
4	Print c	console.log(c)	2
5	Access Color[2] (reverse lookup)	Color[2]	'Green'
6	Print Color[2]	console.log(Color[2])	'Green'

💡 All enum members accessed; program ends after printing values.

Variable Tracker

Variable	Start	After Step 3	Final
Color	undefined	{Red:1, Green:2, Blue:3, 1:'Red', 2:'Green', 3:'Blue'}	{Red:1, Green:2, Blue:3, 1:'Red', 2:'Green', 3:'Blue'}
c	undefined	2	2

Key Moments - 2 Insights

Why does Color.Green equal 2 instead of 1?

Because Red is explicitly set to 1, Green automatically gets the next number, 2, as shown in execution_table step 1 and 2.

How can we get the name 'Green' from the value 2?

By using reverse lookup Color[2], which returns 'Green' as shown in execution_table step 5.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of Color.Blue?

A 2

B 3

C 1

D undefined

💡 Hint

Check step 1 where enum members and their values are defined.

At which step is the variable c assigned a value?

A Step 3

B Step 4

C Step 2

D Step 5

💡 Hint

Look at the action column for assignment to c.

If we change Red to 5, what would Color.Green's value be?

A 5

B 1

C 6

D 2

💡 Hint

Enum auto-increments from the previous value, see step 1 for how values are assigned.

Concept Snapshot

enum EnumName { Member1 = value1, Member2, ... }
Access member value: EnumName.Member1
Reverse lookup: EnumName[value] returns member name
Members auto-increment if not assigned
Use enum values for readable constants

Full Transcript

This example shows how to define an enum in TypeScript with members Red, Green, and Blue. Red is set to 1 explicitly, so Green and Blue get 2 and 3 automatically. We assign Color.Green to variable c and print it, which outputs 2. We also demonstrate reverse lookup by accessing Color[2] to get the string 'Green'. This helps understand how enum members can be accessed by name or by value.