Try–catch block in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to catch errors using a try-catch block.

Javascript

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

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

Athrow new Error('Oops!')

Bconsole.log('No error')

Creturn 'Done'

Dbreak

Attempts:

3 left

💡 Hint

Common Mistakes

Using console.log instead of throw inside try.

Using break outside loops or switch.

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

2fill in blank

medium

Complete the code to handle an error and print its message.

Javascript

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

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

Ae

Berr

Cexception

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names inside catch and console.log.

Omitting the catch parameter.

The catch block receives the error object, here named 'error', to access its message.

3fill in blank

hard

Fix the error in the try-catch syntax.

Javascript

try {
  let result = 10 / 0;
  console.log(result);
} [1] (e) {
  console.log('Error:', e);
}

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

Aerror

Bfinally

Ccatch

Dexcept

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'except' which is Python syntax.

Using 'error' which is not a keyword.

The correct keyword to catch errors is 'catch'.

4fill in blank

hard

Fill both blanks to rethrow an error after catching it.

Javascript

try {
  throw new Error('Fail');
} [1] (err) {
  console.log('Caught:', err.message);
  [2] err;
}

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

Acatch

Bthrow

Cfinally

Dreturn

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'finally' instead of 'catch'.

Using 'return' instead of 'throw' to rethrow.

Use 'catch' to handle the error and 'throw' to rethrow it.

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('Invalid JSON:', [3].message);
    return null;
  }
}

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

Aparse

Berror

Ce

Dexception

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong method name instead of parse.

Using different variable names inside catch and console.log.

Use JSON.parse to parse JSON, and catch block parameter 'e' to handle errors.

Practice

1.

What is the main purpose of a try block in JavaScript?

easy

A. To run code that might cause an error

B. To declare variables

C. To create loops

D. To define functions

Solution

1. Step 1: Understand the role of try

   The try block is used to run code that might throw an error during execution.

2. Step 2: Differentiate from other code blocks

   Other options like declaring variables, loops, or functions are unrelated to error handling.

3. Final Answer:

   To run code that might cause an error -> Option A

4. Quick Check:

   try runs risky code [OK]

Hint: Try block runs risky code safely [OK]

Common Mistakes:

• Thinking try declares variables
• Confusing try with loops
• Assuming try defines functions

2.

Which of the following is the correct syntax to start a try-catch block in JavaScript?

?

easy

A. try: { /* code */ } catch: { /* handle error */ }

B. try { /* code */ } catch (error) { /* handle error */ }

C. try (/* code */) catch (error) { /* handle error */ }

D. try { /* code */ } catch error { /* handle error */ }

Solution

1. Step 1: Recall correct try-catch syntax

   The correct syntax uses curly braces and parentheses for catch: try { ... } catch (error) { ... }.

2. Step 2: Identify syntax errors in other options

   Options B, C, and D misuse colons, parentheses, or omit parentheses around the error parameter.

3. Final Answer:

   try { /* code */ } catch (error) { /* handle error */ } -> Option B

4. Quick Check:

   Curly braces and catch(error) needed [OK]

Hint: Catch needs parentheses around error [OK]

Common Mistakes:

• Using colons instead of braces
• Omitting parentheses in catch
• Using parentheses after try

3.

What will be the output of the following code?

try {
  console.log('Start');
  throw new Error('Oops');
  console.log('End');
} catch (e) {
  console.log('Caught:', e.message);
}

medium

A. Start\nEnd

B. Start

C. Caught: Oops

D. Start\nCaught: Oops

Solution

1. Step 1: Trace code inside try block

   The first console logs 'Start'. Then an error is thrown, so the next console.log('End') is skipped.

2. Step 2: Catch block runs after error

   The catch block catches the error and logs 'Caught: Oops'.

3. Final Answer:

   Start\nCaught: Oops -> Option D

4. Quick Check:

   Error stops try, catch logs message [OK]

Hint: Error stops try; catch runs next [OK]

Common Mistakes:

• Thinking code after throw runs
• Ignoring catch block output
• Confusing error message with error object

4.

Find the error in this code snippet:

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

medium

A. Missing parentheses around e in catch

B. Missing semicolon after console.log

C. Try block cannot have console.log

D. Catch block must come before try

Solution

1. Step 1: Check catch syntax

   The catch block must have parentheses around the error variable: catch (e).

2. Step 2: Verify other parts

   Semicolons are optional in JavaScript; console.log is allowed in try; catch must come after try.

3. Final Answer:

   Missing parentheses around e in catch -> Option A

4. Quick Check:

   Catch needs (error) [OK]

Hint: Catch always needs parentheses around error [OK]

Common Mistakes:

• Omitting parentheses in catch
• Thinking semicolons are mandatory here
• Reversing try and catch order

5.

You want to safely parse a JSON string that might be invalid. Which code correctly uses try-catch to handle errors and return null if parsing fails?

?

hard

A. try {
JSON.parse(str);
} catch {
return null;
}

B. try {
return JSON.parse(str);
} catch e {
return null;
}

C. try {
return JSON.parse(str);
} catch (e) {
return null;
}

D. try {
return JSON.parse(str);
} catch (e) {
throw null;
}

Solution

1. Step 1: Understand JSON parsing risks

   Parsing invalid JSON throws an error, so we use try-catch to handle it safely.

2. Step 2: Check correct catch syntax and behavior

   try { return JSON.parse(str); } catch (e) { return null; } uses correct catch syntax with (e) and returns null on error, which is the goal.

3. Step 3: Identify errors in other options

   try { JSON.parse(str); } catch { return null; } misses return before JSON.parse(str), so returns undefined on success. try { return JSON.parse(str); } catch e { return null; } has syntax error (catch e needs catch (e)). try { return JSON.parse(str); } catch (e) { throw null; } throws null instead of returning it.

4. Final Answer:

   try { return JSON.parse(str); } catch (e) { return null; } -> Option C

5. Quick Check:

   Catch error with (e), return null on failure [OK]

Hint: Catch error with (e), return null on failure [OK]

Common Mistakes:

• Omitting parentheses in catch
• Throwing instead of returning null
• Assuming catch without parameter always works