Reverse mapping in numeric enums in Typescript - Mini Project: Build & Apply

Reverse mapping in numeric enums

📖 Scenario: Imagine you are creating a simple traffic light system in TypeScript. Each light color has a number code. You want to be able to find the color name from the number code and also get the number code from the color name.

🎯 Goal: Build a numeric enum for traffic light colors and use reverse mapping to find the color name from a number code.

📋 What You'll Learn

Create a numeric enum called TrafficLight with exact members: Red = 1, Yellow = 2, Green = 3

Create a variable called lightNumber and set it to 2

Use reverse mapping to get the color name from lightNumber and store it in a variable called lightName

Print the value of lightName to the console

💡 Why This Matters

🌍 Real World

Enums with reverse mapping are useful in programs where you need to convert between codes and names, like traffic lights, status codes, or menu options.

💼 Career

Understanding enums and reverse mapping helps in writing clear and maintainable TypeScript code, a skill valuable for frontend and backend developers working with typed JavaScript.

1

Create the numeric enum

Create a numeric enum called TrafficLight with these exact members and values: Red = 1, Yellow = 2, Green = 3.

Typescript

// Your code here

Hint

Use the enum keyword and assign numbers to each color.

2

Create the number variable

Create a variable called lightNumber and set it to the number 2.

Typescript

enum TrafficLight {
    Red = 1,
    Yellow = 2,
    Green = 3
}

// Your code here

Hint

Use let to create the variable and assign the value 2.

3

Use reverse mapping to get the color name

Use reverse mapping on the TrafficLight enum with lightNumber to get the color name. Store the result in a variable called lightName.

Typescript

enum TrafficLight {
    Red = 1,
    Yellow = 2,
    Green = 3
}

let lightNumber = 2;

// Your code here

Hint

Use bracket notation with the enum and the number variable to get the name.

4

Print the color name

Print the value of lightName to the console using console.log.

Typescript

enum TrafficLight {
    Red = 1,
    Yellow = 2,
    Green = 3
}

let lightNumber = 2;

let lightName = TrafficLight[lightNumber];

// Your code here

Hint

Use console.log(lightName) to show the color name.

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