Catching runtime errors in Javascript - Step-by-Step Execution

Concept Flow - Catching runtime errors

Start

↓

Try block runs

↓

Error occurs?

No→Try block ends normally

Yes↓

Catch block runs

↓

Finally block runs (optional)

↓

Program continues

The program tries to run code inside try. If an error happens, it jumps to catch. Finally runs always, then program continues.

Execution Sample

Javascript

try {
  let result = 10 / 0;
  console.log('Result:', result);
} catch (error) {
  console.log('Error caught:', error.message);
}

This code tries to divide 10 by 0 and logs the result or catches an error if it happens.

Execution Table

Step	Action	Evaluation	Result
1	Enter try block	Start executing code inside try	No error yet
2	Calculate 10 / 0	10 divided by 0	Infinity (no error in JS)
3	console.log('Result:', result)	Prints 'Result: Infinity'	Output: Result: Infinity
4	Try block ends	No error thrown	Catch block skipped
5	Program continues	No catch block run	Program ends normally

💡 No runtime error occurs because dividing by zero in JavaScript returns Infinity, so catch block is not executed.

Variable Tracker

Variable	Start	After Step 2	Final
result	undefined	Infinity	Infinity

Key Moments - 2 Insights

Why doesn't the catch block run when dividing by zero?

In JavaScript, dividing by zero does not cause a runtime error; it returns Infinity. So the try block finishes normally (see execution_table step 2 and 4).

What happens if an actual error occurs inside try?

If an error happens, execution jumps immediately to the catch block (not shown here but explained in concept_flow).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'result' after step 2?

A Infinity

B 0

C Error

D undefined

💡 Hint

Check the 'Evaluation' and 'Result' columns in row 2 of the execution_table.

At which step does the catch block run in this example?

A Step 3

B Never

C Step 4

D Step 2

💡 Hint

Look at the 'Result' column in step 4; it says 'Catch block skipped'.

If the code inside try threw an error, what would happen?

A Try block continues after error

B Program crashes immediately

C Catch block runs to handle the error

D Finally block is skipped

💡 Hint

Refer to the concept_flow diagram showing error jumps from try to catch.

Concept Snapshot

try {
  // code that might cause error
} catch (error) {
  // code to handle error
}

- Code in try runs first
- If error occurs, catch runs
- No error means catch skipped
- Finally block can run always (optional)

Full Transcript

This example shows how JavaScript handles runtime errors using try and catch. The program tries to run code inside the try block. If an error happens, it jumps to the catch block to handle it. In this example, dividing 10 by 0 does not cause an error but returns Infinity, so the catch block does not run. The execution table shows each step: starting try, calculating division, printing result, and ending try without error. Variables like 'result' change from undefined to Infinity. Key points include understanding that not all errors throw exceptions (like division by zero in JS) and that catch only runs if an error occurs. The quiz asks about variable values, when catch runs, and what happens if an error occurs. The quick snapshot summarizes the try-catch syntax and behavior.

Practice

1.

What is the main purpose of using try and catch in JavaScript?

easy

A. To create new variables

B. To speed up the program execution

C. To handle errors and prevent the program from crashing

D. To repeat code multiple times

Solution

1. Step 1: Understand the role of try block

   The try block runs code that might cause an error.

2. Step 2: Understand the role of catch block

   The catch block handles any error from the try block to keep the program running smoothly.

3. Final Answer:

   To handle errors and prevent the program from crashing -> Option C

4. Quick Check:

   try-catch = error handling [OK]

Hint: Try-catch blocks catch errors to keep programs running [OK]

Common Mistakes:

• Thinking try-catch speeds up code
• Using try-catch to create variables
• Confusing try-catch with loops

2.

Which of the following is the correct syntax to catch errors in JavaScript?

try {
  // code
} catch (error) {
  // handle error
}

easy

A. try { } catch (error) { }

B. try { } catch error() { }

C. try (error) { } catch { }

D. try { } catch error { }

Solution

1. Step 1: Check the try block syntax

   The try block must be followed by catch with parentheses around the error variable.

2. Step 2: Verify the catch block syntax

   The correct syntax is catch (error) { } with parentheses around the error parameter.

3. Final Answer:

   try { } catch (error) { } -> Option A

4. Quick Check:

   catch needs parentheses [OK]

Hint: Catch block always uses parentheses for error [OK]

Common Mistakes:

• Omitting parentheses in catch
• Using parentheses after try
• Adding parentheses after catch keyword

3.

What will be the output of the following code?

try {
  let result = 10 / 0;
  console.log(result);
} catch (e) {
  console.log('Error caught');
}

medium

A. Infinity

B. Error caught

C. 0

D. undefined

Solution

1. Step 1: Understand division by zero in JavaScript

   Dividing 10 by 0 does not cause an error; it results in Infinity.

2. Step 2: Check if catch block runs

   Since no error occurs, the catch block is skipped and Infinity is logged.

3. Final Answer:

   Infinity -> Option A

4. Quick Check:

   10/0 = Infinity, no error [OK]

Hint: Division by zero returns Infinity, no error thrown [OK]

Common Mistakes:

• Assuming division by zero throws error
• Expecting catch block to run
• Confusing 0 with Infinity

4.

Find the error in this code and choose the correct fix:

try {
  console.log(x);
} catch e {
  console.log('Error:', e.message);
}

medium

A. Declare x before try block

B. Change catch e to catch (e)

C. Add finally block after catch

D. Remove the catch block

Solution

1. Step 1: Identify syntax error in catch block

   The catch block must have parentheses around the error variable, so catch e is invalid syntax.

2. Step 2: Correct the catch syntax

   Changing it to catch (e) fixes the syntax and allows error handling.

3. Final Answer:

   Change catch e to catch (e) -> Option B

4. Quick Check:

   Catch needs parentheses around error [OK]

Hint: Catch error variable must be in parentheses [OK]

Common Mistakes:

• Omitting parentheses in catch
• Adding finally when not needed
• Ignoring undeclared variable error

5.

You want to safely parse JSON data that might be invalid. Which code snippet correctly catches parsing errors?

const jsonString = '{"name": "Alice", age: 25}';
try {
  const data = JSON.parse(jsonString);
  console.log(data.name);
} catch (error) {
  console.log('Invalid JSON:', error.message);
}

hard

A. You must use if-else instead of try-catch for JSON parsing

B. This code will crash because JSON.parse never throws errors

C. The catch block should be after console.log(data.name)

D. This code correctly catches JSON parsing errors and logs a message

Solution

1. Step 1: Understand JSON.parse behavior

   JSON.parse throws an error if the JSON string is invalid, like missing quotes around keys.

2. Step 2: Check try-catch usage

   The try block runs JSON.parse, and the catch block handles any parsing error to avoid crashing.

3. Final Answer:

   This code correctly catches JSON parsing errors and logs a message -> Option D

4. Quick Check:

   try-catch handles JSON.parse errors [OK]

Hint: Use try-catch to handle JSON.parse errors safely [OK]

Common Mistakes:

• Assuming JSON.parse never throws errors
• Placing catch block incorrectly
• Using if-else instead of try-catch for errors