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.

Practice

1. What does reverse mapping in numeric enums in TypeScript allow you to do?

easy

A. Prevent enums from being changed at runtime

B. Convert enum names to strings automatically

C. Convert enum numeric values back to their corresponding names

D. Create string enums instead of numeric enums

Solution

1. Step 1: Understand numeric enums

   Numeric enums assign numbers to names and create a two-way map.

2. Step 2: Understand reverse mapping

   Reverse mapping lets you use the number to get the enum name back.

3. Final Answer:

   Convert enum numeric values back to their corresponding names -> Option C

4. Quick Check:

   Reverse mapping = number to name conversion [OK]

Hint: Remember: numeric enums map both ways: name↔number [OK]

Common Mistakes:

• Thinking reverse mapping converts names to strings
• Confusing string enums with numeric enums
• Assuming enums are immutable at runtime

2. Which of the following is the correct syntax to access the name from a numeric enum value 2 in TypeScript?

easy

A. EnumName['name']

B. EnumName[2]

C. EnumName.getName(2)

D. EnumName.2

Solution

1. Step 1: Recall enum reverse mapping syntax

   Numeric enums create a reverse map accessible by bracket notation with the number.

2. Step 2: Identify correct syntax

   Using EnumName[2] returns the name for value 2.

3. Final Answer:

   EnumName[2] -> Option B

4. Quick Check:

   Bracket notation with number = Enum name [OK]

Hint: Use bracket notation with number to get enum name [OK]

Common Mistakes:

• Using dot notation with a number (invalid syntax)
• Trying to call a non-existent getName method
• Using string keys instead of numeric keys

3. Given the enum:

enum Color { Red, Green, Blue }

What is the output of console.log(Color[1])?

medium

A. "Green"

B. "Red"

C. 1

D. undefined

Solution

1. Step 1: Understand enum default values

   By default, Red=0, Green=1, Blue=2 in numeric enums.

2. Step 2: Use reverse mapping

   Color[1] returns the name for value 1, which is "Green".

3. Final Answer:

   "Green" -> Option A

4. Quick Check:

   Color[1] = "Green" [OK]

Hint: Default enum starts at 0, so 1 maps to second name [OK]

Common Mistakes:

• Assuming enum values start at 1
• Expecting numeric output instead of string
• Confusing enum name with value

4. Consider this enum:

enum Status { Active = 1, Inactive, Pending }

What is wrong with this code?

console.log(Status[0]);

medium

A. It returns undefined because 0 is not a valid enum value

B. It causes a syntax error

C. It returns "Active" incorrectly

D. It throws a runtime exception

Solution

1. Step 1: Check enum values

   Status starts at 1, so valid values are 1, 2, 3 for Active, Inactive, Pending.

2. Step 2: Check reverse mapping for 0

   Status[0] does not exist, so it returns undefined.

3. Final Answer:

   It returns undefined because 0 is not a valid enum value -> Option A

4. Quick Check:

   Invalid enum value returns undefined [OK]

Hint: Check enum start value before reverse mapping [OK]

Common Mistakes:

• Expecting 0 to map to first enum name
• Thinking it causes syntax or runtime error
• Assuming reverse mapping always returns a string

5. Given this enum with custom values:

enum Direction { Up = 3, Down = 5, Left = 7, Right = 9 }

What will console.log(Direction[5]) output?

hard

A. 5

B. "Up"

C. undefined

D. "Down"

Solution

1. Step 1: Identify enum values

   Direction enum assigns Up=3, Down=5, Left=7, Right=9 explicitly.

2. Step 2: Use reverse mapping

   Direction[5] returns the name for value 5, which is "Down".

3. Final Answer:

   "Down" -> Option D

4. Quick Check:

   Reverse mapping works with custom numeric values [OK]

Hint: Reverse mapping works even with custom enum numbers [OK]

Common Mistakes:

• Assuming reverse mapping only works with default values
• Expecting numeric output instead of string
• Confusing enum names with values