Reverse mapping in numeric enums in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a numeric enum named Direction.

Typescript

enum Direction {
  Up = [1],
  Down,
  Left,
  Right
}

Drag options to blanks, or click blank then click option'

A0

B1

C10

D-1

Attempts:

3 left

💡 Hint

Common Mistakes

Assigning 1 to the first member, which changes the default numbering.

Leaving the first member unassigned but expecting it to start at 1.

The first enum member defaults to 0 if not assigned. Here, we explicitly assign 0 to Up.

2fill in blank

medium

Complete the code to get the name of the enum member with value 2.

Typescript

let directionName = Direction[[1]];

Drag options to blanks, or click blank then click option'

A"Up"

B"Left"

C2

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using the string name instead of the numeric value for reverse mapping.

Using a value not defined in the enum.

Numeric enums support reverse mapping. Using the numeric value 2 returns the member name 'Left'.

3fill in blank

hard

Fix the error in accessing the enum member name by value.

Typescript

console.log(Direction[[1]]);

Drag options to blanks, or click blank then click option'

A4

B1

C"Right"

D"Down"

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string instead of a numeric value for reverse mapping.

Using a numeric value not assigned to any enum member.

Direction[1] returns 'Down' because Down is the second member with value 1.

4fill in blank

hard

Fill both blanks to create a reverse mapping lookup for the enum member with value 3.

Typescript

const value = [1];
const name = Direction[[2]];

Drag options to blanks, or click blank then click option'

A3

B2

Cvalue

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong numeric value that does not correspond to any member.

Using a literal number instead of the variable in the second blank.

Assign 3 to value, then use Direction[value] to get the member name 'Right'.

5fill in blank

hard

Fill all three blanks to declare a numeric enum with custom start, then get the name of the member with value 101.

Typescript

enum Status {
  Active = [1],
  Inactive,
  Pending
}

const code = [2];
const statusName = Status[[3]];

Drag options to blanks, or click blank then click option'

A100

B101

Ccode

D102

Attempts:

3 left

💡 Hint

Common Mistakes

Starting enum at 0 instead of 100.

Using the numeric value directly instead of the variable in the last blank.

Start enum at 100, so Inactive is 101. Assign 101 to code, then use Status[code] to get 'Inactive'.

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