Numeric enums in Typescript - Step-by-Step Execution

Concept Flow - Numeric enums

Start

↓

Define enum with numeric values

↓

Assign default or explicit numbers

↓

Use enum values in code

↓

Access enum by name or number

↓

End

This flow shows how numeric enums are defined, assigned values, and accessed in TypeScript.

Execution Sample

Typescript

enum Direction {
  Up = 1,
  Down,
  Left,
  Right
}
console.log(Direction.Up, Direction.Down, Direction.Left, Direction.Right);

Defines a numeric enum Direction with explicit and implicit values, then prints all values.

Execution Table

Step	Action	Evaluation	Result
1	Define enum Direction with Up=1	Up = 1	Direction.Up = 1
2	Assign Down without value	Down = Up + 1	Direction.Down = 2
3	Assign Left without value	Left = Down + 1	Direction.Left = 3
4	Assign Right without value	Right = Left + 1	Direction.Right = 4
5	Print Direction.Up	Direction.Up	1
6	Print Direction.Down	Direction.Down	2
7	Print Direction.Left	Direction.Left	3
8	Print Direction.Right	Direction.Right	4
9	End of execution	-	-

💡 All enum members assigned numeric values; printing completes.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
Direction.Up	-	1	1	1	1	1
Direction.Down	-	-	2	2	2	2
Direction.Left	-	-	-	3	3	3
Direction.Right	-	-	-	-	4	4

Key Moments - 2 Insights

Why does Down get the value 2 even though we didn't assign it explicitly?

Because in numeric enums, if a member is not assigned a value, it gets the previous member's value plus one, as shown in execution_table step 2.

Can we access enum members by their numeric values?

Yes, TypeScript enums create a reverse mapping, so you can access the name by number, but this example focuses on numeric values only.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of Direction.Left after step 3?

A 3

B 2

C 4

D 1

💡 Hint

Check the 'Result' column in row with Step 3 for Direction.Left.

At which step does Direction.Right get its value assigned?

A Step 3

B Step 4

C Step 2

D Step 1

💡 Hint

Look at the 'Action' column for assignment of Direction.Right.

If we changed Up to 5, what would Direction.Down be after step 2?

A 5

B 1

C 6

D 4

💡 Hint

Remember that unassigned members get previous value plus one, see variable_tracker.

Concept Snapshot

Numeric enums assign numbers to names.
Start with explicit or default 0.
Unassigned members get previous + 1.
Access by name or number.
Useful for readable constants.

Full Transcript

This example shows how TypeScript numeric enums work. We define an enum Direction with Up assigned 1 explicitly. The next members Down, Left, and Right get values 2, 3, and 4 automatically because they follow Up. We print all values to see the numbers. Numeric enums let us use names instead of numbers, making code easier to read. Unassigned members get the previous member's value plus one. This is shown step-by-step in the execution table and variable tracker. Understanding this helps avoid confusion about enum values.