Reverse mapping in numeric enums in Typescript - Step-by-Step Execution

Concept Flow - Reverse mapping in numeric enums

Define numeric enum

↓

Enum creates forward map

↓

Enum creates reverse map

↓

Access by name -> number

↓

Access by number -> name

↓

Use both mappings in code

When you define a numeric enum, TypeScript creates two maps: name to number and number to name, allowing reverse lookup.

Execution Sample

Typescript

enum Color {
  Red = 1,
  Green,
  Blue
}

let c = Color.Green;
let name = Color[c];

Defines a numeric enum Color, assigns Green's numeric value to c, then uses reverse mapping to get the name 'Green'.

Execution Table

Step	Action	Evaluation	Result
1	Define enum Color with Red=1, Green=2, Blue=3	Create forward and reverse mappings	Color = {1: 'Red', 2: 'Green', 3: 'Blue', Red: 1, Green: 2, Blue: 3}
2	Assign c = Color.Green	Color.Green is 2	c = 2
3	Access name = Color[c]	Color[2] is 'Green'	name = 'Green'
4	Output name	Print name	Output: Green

💡 All enum members processed; reverse mapping allows Color[2] to return 'Green'

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
c	undefined	2	2	2
name	undefined	undefined	'Green'	'Green'

Key Moments - 2 Insights

Why can we use Color[2] to get 'Green'?

Because TypeScript creates a reverse mapping from number to name in numeric enums, as shown in execution_table step 1 and step 3.

What happens if we try reverse mapping on string enums?

Reverse mapping does not work for string enums; only numeric enums have this feature, so Color[2] works only because Color is numeric.

Visual Quiz - 3 Questions

Look at the execution_table at step 2, what is the value of variable c?

A 2

B 'Green'

C 1

D undefined

💡 Hint

Check the 'After Step 2' column in variable_tracker for c.

At which step does reverse mapping happen to get the name 'Green'?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at execution_table step 3 where Color[c] is evaluated.

If Color.Green was assigned 5 instead of 2, what would Color[5] return?

A 'Blue'

B 'Green'

C undefined

D Error

💡 Hint

Reverse mapping matches the numeric value to the name, see execution_table step 1.

Concept Snapshot

Numeric enums create two-way maps:
- Name to number (e.g., Color.Green = 2)
- Number to name (e.g., Color[2] = 'Green')
This allows reverse lookup by number.
Only numeric enums have reverse mapping, not string enums.

Full Transcript

This example shows how TypeScript numeric enums create both forward and reverse mappings. When you define enum Color with Red=1, Green=2, Blue=3, TypeScript builds an object where you can get the number from the name and also get the name from the number. We assign c = Color.Green which is 2. Then we use reverse mapping Color[c] to get the string 'Green'. This is possible because numeric enums automatically create this reverse map. This feature does not exist for string enums. The execution table traces each step: defining the enum, assigning c, accessing the name by reverse mapping, and outputting the result. The variable tracker shows how c and name change. The key moments clarify why reverse mapping works and its limits. The quiz tests understanding of variable values and reverse mapping steps.