Enum member access in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of accessing enum members by name and value?

Consider the following TypeScript enum and code snippet. What will be printed to the console?

Typescript

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

console.log(Direction.Up);
console.log(Direction[2]);

A 1\nDown

B Up\n2

C 1\nDown\nLeft

D 1\nundefined

💡 Hint

Remember that enums in TypeScript can be accessed both by member name and by numeric value.

Direction.Up is assigned 1 explicitly, so console.log(Direction.Up) prints 1. Direction[2] accesses the enum member with value 2, which is 'Down'. So the output is '1' and then 'Down'.

❓ Predict Output

intermediate

What happens when accessing a non-existent enum member by value?

Given this enum and code, what will be the output?

Typescript

enum Status {
  Active = 1,
  Inactive = 3,
  Pending = 5
}

console.log(Status[2]);

A Inactive

B Error: Property does not exist

C 2

D undefined

💡 Hint

Check if the enum has a member with the value 2.

The enum Status has members with values 1, 3, and 5. There is no member with value 2, so Status[2] returns undefined.

🔧 Debug

advanced

Why does this enum member access cause a runtime error?

Examine the code below. Why does accessing Color['Blue'] cause a runtime error?

Typescript

enum Color {
  Red = 'RED',
  Green = 'GREEN'
}

console.log(Color['Blue']);

A It throws a TypeError because string enums do not support reverse mapping.

B Accessing Color['Blue'] throws a ReferenceError because 'Blue' is not declared.

C Color enum does not have a member named 'Blue', so accessing it returns undefined, causing no error.

D It prints 'Blue' because enums allow dynamic keys.

💡 Hint

Check how string enums behave when accessed by keys that don't exist.

Accessing Color['Blue'] returns undefined because 'Blue' is not a member of the enum. This does not cause a runtime error; it just returns undefined.

❓ Predict Output

advanced

What is the output when accessing numeric enum members with computed values?

Look at this enum and code. What will be the output?

Typescript

enum FileAccess {
  None,
  Read = 1 << 1,
  Write = 1 << 2,
  ReadWrite = Read | Write,
  G = '123'.length
}

console.log(FileAccess.ReadWrite);
console.log(FileAccess[3]);
console.log(FileAccess.G);

A 6\nG\n3

B 6\nundefined\n3

C 6\nReadWrite\n3

D 6\nWrite\n3

💡 Hint

Calculate the bitwise OR and the length of the string.

Read is 2 (1 << 1), Write is 4 (1 << 2), so ReadWrite is 6 (2 | 4). FileAccess[3] is undefined because 3 is not assigned to any member. G is 3 ('123'.length). FileAccess.G is 3.

❓ Predict Output

expert

What is the output of this mixed enum member access?

Analyze the following enum and code. What will be printed?

Typescript

enum Mixed {
  A = 1,
  B,
  C = 'C',
  D = 5
}

console.log(Mixed.A);
console.log(Mixed.B);
console.log(Mixed.C);
console.log(Mixed[2]);
console.log(Mixed[5]);
console.log(Mixed['C']);

A 1\n2\nC\nB\nD\nC

B 1\n2\nC\nundefined\nD\nundefined

C 1\n2\nC\nundefined\nD\nC

D 1\n2\nC\nB\nD\nundefined

💡 Hint

Remember that string enum members do not create reverse mappings.

A is 1, B is 2 (auto increment). C is a string 'C'. D is 5. Mixed[2] is 'B' (reverse mapping). Mixed[5] is 'D' (reverse mapping). Mixed['C'] is 'C' (direct property access).

Practice

1.

Which of the following is the correct way to access a member named Red from an enum called Color?

easy

A. Color.Red

B. Red.Color

C. Color[Red]

D. Red.Color()

Solution

1. Step 1: Understand enum member access syntax

   In TypeScript, enum members are accessed using dot notation with the enum name first, then the member name.

2. Step 2: Apply correct syntax to the example

   For enum Color and member Red, the correct access is Color.Red.

3. Final Answer:

   Color.Red -> Option A

4. Quick Check:

   Enum member access = Color.Red [OK]

Hint: Use EnumName.Member to access enum values quickly [OK]

Common Mistakes:

• Reversing the order like Red.Color
• Using brackets without quotes for string enums
• Calling enum members as functions

2.

Which of the following is the correct syntax to define a numeric enum named Direction with members Up, Down, Left, and Right?

?

easy

A. enum Direction (Up, Down, Left, Right)

B. enum Direction = { Up, Down, Left, Right }

C. enum Direction { Up, Down, Left, Right }

D. enum Direction: { Up, Down, Left, Right }

Solution

1. Step 1: Recall enum declaration syntax

   In TypeScript, enums are declared using the keyword enum followed by the name and curly braces containing members.

2. Step 2: Match correct syntax

   enum Direction { Up, Down, Left, Right } uses enum Direction { Up, Down, Left, Right }, which is the correct syntax.

3. Final Answer:

   enum Direction { Up, Down, Left, Right } -> Option C

4. Quick Check:

   Enum declaration uses curly braces {} [OK]

Hint: Use curly braces {} after enum name to list members [OK]

Common Mistakes:

• Using equals sign (=) after enum name
• Using colon (:) instead of braces
• Using parentheses () instead of braces

3.

Given the enum:

enum Status { Active = 1, Inactive, Pending }

What is the output of console.log(Status[2])?

medium

A. "Pending"

B. "Inactive"

C. 2

D. undefined

Solution

1. Step 1: Understand numeric enum reverse mapping

   Numeric enums in TypeScript create a reverse mapping from value to name. Here, Active = 1, so Inactive is 2, Pending is 3.

2. Step 2: Access enum member by value

   Status[2] returns the name of the member with value 2, which is Inactive.

3. Final Answer:

   "Inactive" -> Option B

4. Quick Check:

   Numeric enum reverse lookup = "Inactive" [OK]

Hint: Numeric enums map values back to names automatically [OK]

Common Mistakes:

• Assuming string enums have reverse mapping
• Confusing member names with values
• Expecting numeric output instead of string

4.

Consider this enum and code snippet:

enum Fruit { Apple = "APPLE", Banana = "BANANA" }
console.log(Fruit["APPLE"]);

What will happen when this code runs?

medium

A. undefined

B. "APPLE"

C. "Apple"

D. SyntaxError

Solution

1. Step 1: Understand string enum member access

   String enums do not have reverse mapping from value to name like numeric enums.

2. Step 2: Analyze the code behavior

   Accessing Fruit["APPLE"] looks for a member named "APPLE", but enum keys are "Apple" and "Banana". So it returns undefined.

3. Final Answer:

   undefined -> Option A

4. Quick Check:

   String enums lack reverse mapping = undefined [OK]

Hint: String enums do not support reverse lookup by value [OK]

Common Mistakes:

• Expecting reverse mapping for string enums
• Confusing enum keys with values
• Assuming case-insensitive access

5.

You have this enum and function:

enum Status { Success = 200, NotFound = 404, ServerError = 500 }

function getStatusName(code: number): string {
  return Status[code] || "Unknown";
}

What will getStatusName(404) return, and why?

hard

A. "Unknown" because reverse mapping is not supported

B. "404" because it returns the number as string

C. Runtime error due to invalid access

D. "NotFound" because numeric enums support reverse mapping

Solution

1. Step 1: Recognize numeric enum reverse mapping

   Numeric enums in TypeScript create a reverse mapping from numeric values to member names.

2. Step 2: Evaluate function behavior with input 404

   Calling getStatusName(404) returns Status[404], which is "NotFound". If no match, it returns "Unknown".

3. Final Answer:

   "NotFound" because numeric enums support reverse mapping -> Option D

4. Quick Check:

   Numeric enum reverse lookup returns member name [OK]

Hint: Numeric enum values map back to names automatically [OK]

Common Mistakes:

• Thinking it returns the number as string
• Assuming reverse mapping doesn't exist
• Expecting runtime errors on valid enum access