Const enums and optimization in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of const enum in compiled JavaScript

What is the output of the following TypeScript code when compiled to JavaScript and run?

Typescript

const enum Colors {
  Red = 1,
  Green,
  Blue
}

console.log(Colors.Green);

A 1

B undefined

C 2

D "Green"

💡 Hint

Remember that const enums are inlined during compilation.

Const enums are replaced by their values during compilation. Colors.Green is 2 because Red starts at 1 and Green increments by 1.

🧠 Conceptual

intermediate

Why use const enums for optimization?

Which of the following best explains why const enums improve runtime performance in TypeScript?

A They generate extra code to check enum values at runtime.

B They inline enum values, removing object lookups at runtime.

C They create a separate enum object to reduce memory usage.

D They delay enum value evaluation until runtime.

💡 Hint

Think about what happens to enum references in the compiled code.

Const enums are replaced by their literal values during compilation, so no enum object is created and no lookup is needed at runtime.

❓ Predict Output

advanced

Effect of const enum on emitted JavaScript code

Given this TypeScript code, what will the compiled JavaScript output be?

Typescript

const enum Status {
  Success = 0,
  Failure = 1
}

function check(status: Status) {
  if (status === Status.Success) {
    return "OK";
  }
  return "Error";
}

console.log(check(Status.Failure));

A "Error"

B ReferenceError: Status is not defined

C "Failure"

D "OK"

💡 Hint

Const enums are replaced by their values, so no enum object exists at runtime.

The function compares the input to 0 (Success) and returns "OK" if matched, else "Error". Status.Failure is replaced by 1, so the output is "Error".

🔧 Debug

advanced

Why does this code cause a runtime error?

Consider this TypeScript code snippet: const enum Directions { Up, Down, Left, Right } console.log(Directions); Why does this cause a runtime error when compiled and run?

A Because the enum has duplicate values causing a conflict.

B Because the enum values are strings, which cannot be logged directly.

C Because the enum is not exported and cannot be accessed outside its module.

D Because const enums are removed during compilation and no Directions object exists at runtime.

💡 Hint

Think about what happens to const enums in the compiled JavaScript.

Const enums are completely removed during compilation and replaced by their values. The Directions object does not exist at runtime, so logging it causes a ReferenceError.

🚀 Application

expert

Optimizing large enum usage with const enums

You have a large enum used only for numeric constants in performance-critical code. Which approach best optimizes runtime speed and reduces output size?

A Use a const enum so all references are inlined as numeric literals.

B Use a regular enum and access values via the enum object at runtime.

C Use string enums to improve readability and debugging.

D Use a namespace with constant variables instead of enums.

💡 Hint

Inlining values removes object lookups and reduces code size.

Const enums inline their values at compile time, eliminating runtime object lookups and reducing code size, which improves performance in critical code.

Practice

1. What is the main benefit of using const enum in TypeScript?

easy

A. It allows enums to be modified at runtime.

B. It enables enums to be serialized to JSON automatically.

C. It replaces enum references with actual values at compile time, reducing runtime code.

D. It creates a separate JavaScript object for the enum at runtime.

Solution

1. Step 1: Understand what const enum does

   const enum replaces enum references with their actual values during compilation, so no enum object exists at runtime.

2. Step 2: Compare runtime behavior

   Unlike regular enums, const enum does not generate extra JavaScript code for the enum object, reducing code size and improving speed.

3. Final Answer:

   It replaces enum references with actual values at compile time, reducing runtime code. -> Option C

4. Quick Check:

   Const enums optimize code by replacing references with values [OK]

Hint: Const enums inline values, no runtime object created [OK]

Common Mistakes:

• Thinking const enums create runtime objects
• Believing const enums allow runtime modification
• Confusing const enums with regular enums

2. Which of the following is the correct syntax to declare a const enum in TypeScript?

easy

A. enum Colors { Red, Green, Blue }

B. const enum Colors { Red, Green, Blue }

C. constant enum Colors { Red, Green, Blue }

D. enum const Colors { Red, Green, Blue }

Solution

1. Step 1: Recall the correct keyword order

   The correct syntax uses the keyword const before enum to declare a const enum.

2. Step 2: Check each option

   const enum Colors { Red, Green, Blue } matches the correct syntax: const enum Colors { Red, Green, Blue }. Options C and D use invalid keywords or order.

3. Final Answer:

   const enum Colors { Red, Green, Blue } -> Option B

4. Quick Check:

   Const enum syntax = const enum [OK]

Hint: Remember: const comes before enum in declaration [OK]

Common Mistakes:

• Writing 'constant' instead of 'const'
• Placing 'const' after 'enum'
• Omitting 'const' keyword

3. Given the following code, what will be the output when compiled and run?

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

const move = Direction.Left;
console.log(move);

medium

A. 3

B. undefined

C. Left

D. 2

Solution

1. Step 1: Understand enum value assignment

   The enum starts with Up = 1, so Down = 2, Left = 3, and Right = 4.

2. Step 2: Identify the value of Direction.Left

   It is 3, so move is assigned 3, and console.log(move) prints 3.

3. Final Answer:

   3 -> Option A

4. Quick Check:

   Enum Left value = 3 [OK]

Hint: Count enum values starting from assigned number [OK]

Common Mistakes:

• Assuming Left is 2 instead of 3
• Expecting string output 'Left'
• Confusing enum with object property

4. What is the error in the following TypeScript code using const enums?

const enum Status {
  Active = 1,
  Inactive = 0
}

console.log(Status[1]);

medium

A. Compile-time error: Cannot use reverse mapping with const enums

B. Runtime error: Status is undefined

C. No error, outputs 'Active'

D. Outputs 1

Solution

1. Step 1: Understand const enum limitations

   Const enums do not generate an object at runtime, so reverse mapping (accessing by index) is not supported.

2. Step 2: Identify the error cause

   Using Status[1] tries to access reverse mapping, causing a compile-time error.

3. Final Answer:

   Compile-time error: Cannot use reverse mapping with const enums -> Option A

4. Quick Check:

   Reverse mapping disallowed in const enums [OK]

Hint: Const enums have no reverse mapping, avoid index access [OK]

Common Mistakes:

• Expecting reverse mapping to work with const enums
• Thinking it outputs string 'Active'
• Ignoring compile-time errors

5. You want to optimize a TypeScript program by replacing a regular enum with a const enum. Which of the following changes will NOT work correctly after this replacement?

hard

A. Using enum values directly in expressions and comparisons.

B. Using enum values as keys in a switch statement.

C. Assigning enum values to variables for later use.

D. Accessing enum values by their numeric index (reverse mapping).

Solution

1. Step 1: Recall const enum behavior

   Const enums inline values and do not create runtime objects, so reverse mapping (index to name) is not available.

2. Step 2: Analyze each option

   Options A, B, and D work fine as they use the inlined values directly. Accessing enum values by their numeric index (reverse mapping). requires reverse mapping, which fails with const enums.

3. Final Answer:

   Accessing enum values by their numeric index (reverse mapping). -> Option D

4. Quick Check:

   Reverse mapping breaks with const enums [OK]

Hint: Const enums disallow reverse mapping, avoid numeric index access [OK]

Common Mistakes:

• Assuming all enum features work with const enums
• Using reverse mapping without error
• Confusing const enum with regular enum behavior