Catching runtime errors in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to catch errors using try-catch.

Javascript

try {
  console.log('Start');
  [1]
} catch (error) {
  console.log('Error caught');
}

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

Aconsole.log('No error')

Blet x = 5

Cthrow new Error('Oops!')

Dreturn true

Attempts:

3 left

💡 Hint

Common Mistakes

Not using throw causes no error to catch.

Using return inside try without error does not trigger catch.

The throw statement inside try causes an error that is caught by catch.

2fill in blank

medium

Complete the code to log the error message inside catch.

Javascript

try {
  JSON.parse('invalid json');
} catch ([1]) {
  console.log([1].message);
}

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

Aerror

Be

Cerr

Dexception

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names inside catch and inside the block causes ReferenceError.

Omitting the catch parameter causes syntax error.

The catch block parameter is commonly named error to access the error object.

3fill in blank

hard

Fix the error in the code to properly catch exceptions.

Javascript

try {
  let result = a / 0;
  console.log(result);
} catch [1] {
  console.log('Error:', error.message);
}

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

A(error)

B[error]

C{error}

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Using brackets or braces instead of parentheses causes syntax error.

Omitting parentheses causes syntax error.

The catch block must have parentheses around the error parameter.

4fill in blank

hard

Fill both blanks to throw and catch a custom error message.

Javascript

try {
  [1] new Error('Custom error');
} catch (e) {
  console.log(e.[2]);
}

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

Athrow

Bmessage

Cname

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Using error instead of throw does not raise an error.

Accessing e.name instead of e.message shows error type, not message.

Use throw to raise the error and access e.message to get the error text.

5fill in blank

hard

Fill all three blanks to parse JSON safely and handle errors.

Javascript

function safeParse(json) {
  try {
    return JSON.[1](json);
  } catch ([2]) {
    console.log('Parsing failed:', [3].message);
    return null;
  }
}

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

Aparse

Berror

Ce

Derr

Attempts:

3 left

💡 Hint

Common Mistakes

Using JSON.stringify instead of parse causes wrong output.

Mismatch between catch parameter and usage causes ReferenceError.

Use JSON.parse to parse, catch parameter e, and log e.message.

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