Why error handling is required in Javascript - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why do we need error handling in JavaScript?

Which of the following best explains why error handling is important in JavaScript programs?

A It prevents the program from ever stopping or crashing, no matter what.

B It makes the program run faster by skipping error checks.

C It helps the program continue running smoothly even when unexpected problems occur.

D It automatically fixes all bugs in the code without programmer input.

💡 Hint

Think about what happens if something goes wrong in a program without any way to handle it.

Error handling allows a program to manage unexpected problems gracefully, so it can keep working or provide useful messages instead of crashing.

❓ Predict Output

intermediate

Output with and without error handling

What will be the output of the following JavaScript code?

function divide(a, b) {
  return a / b;
}

console.log(divide(10, 0));

Javascript

function divide(a, b) {
  return a / b;
}

console.log(divide(10, 0));

A Error: Division by zero

B 0

C NaN

D Infinity

💡 Hint

In JavaScript, dividing a number by zero does not throw an error but returns a special value.

JavaScript returns Infinity when dividing a positive number by zero instead of throwing an error.

❓ Predict Output

advanced

What error is thrown without try-catch?

What error will this code produce when run?

const obj = null;
console.log(obj.name);

Javascript

const obj = null;
console.log(obj.name);

A TypeError: Cannot read property 'name' of null

B ReferenceError: obj is not defined

C SyntaxError: Unexpected token '.'

D undefined

💡 Hint

Accessing a property on null causes a specific type of error in JavaScript.

Trying to access a property on null throws a TypeError because null is not an object.

🧠 Conceptual

advanced

Benefits of using try-catch blocks

Which of the following is NOT a benefit of using try-catch blocks in JavaScript?

A They automatically fix the errors in the code.

B They allow the program to handle errors without stopping execution abruptly.

C They can provide custom error messages to users.

D They help in debugging by catching and logging errors.

💡 Hint

Think about what try-catch blocks do and what they do not do.

Try-catch blocks help manage errors but do not fix the errors automatically; fixing requires programmer action.

🚀 Application

expert

Predict output with nested try-catch and finally

What will be the output of this JavaScript code?

function test() {
  try {
    console.log('Start');
    throw new Error('Oops');
  } catch (e) {
    console.log('Caught:', e.message);
    return 'From catch';
  } finally {
    console.log('Finally block');
    return 'From finally';
  }
}

console.log(test());

Javascript

function test() {
  try {
    console.log('Start');
    throw new Error('Oops');
  } catch (e) {
    console.log('Caught:', e.message);
    return 'From catch';
  } finally {
    console.log('Finally block');
    return 'From finally';
  }
}

console.log(test());

A

Start
Caught: Oops
Finally block
From catch

B

Start
Caught: Oops
Finally block
From finally

C

Start
Finally block
Caught: Oops
From finally

D

Start
Caught: Oops
From catch
Finally block

💡 Hint

Remember that a return in finally overrides previous returns.

The finally block runs after catch and its return overrides the catch return, so the function returns 'From finally'.

Practice

1. Why is error handling important in JavaScript programs?

easy

A. It helps the program continue running even if an error occurs.

B. It makes the program run faster.

C. It removes all bugs automatically.

D. It changes the program's logic.

Solution

1. Step 1: Understand the role of error handling

   Error handling is used to manage unexpected problems during program execution.

2. Step 2: Identify the benefit of error handling

   It allows the program to keep running smoothly instead of crashing.

3. Final Answer:

   It helps the program continue running even if an error occurs. -> Option A

4. Quick Check:

   Error handling = program continues [OK]

Hint: Error handling keeps programs running without crashing [OK]

Common Mistakes:

• Thinking error handling speeds up code
• Believing it fixes bugs automatically
• Confusing error handling with changing logic

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

easy

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

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

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

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

Solution

1. Step 1: Recall JavaScript error handling syntax

   The correct syntax uses try block followed by catch with an error parameter.

2. Step 2: Match syntax with options

   try { /* code */ } catch (error) { /* handle error */ } matches the correct structure: try { } catch (error) { }.

3. Final Answer:

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

4. Quick Check:

   try-catch syntax = try { /* code */ } catch (error) { /* handle error */ } [OK]

Hint: Remember: try then catch(error) to handle exceptions [OK]

Common Mistakes:

• Swapping try and catch keywords
• Omitting error parameter in catch
• Using incorrect parentheses placement

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\nCaught: Oops

B. Caught: Oops

C. Start\nEnd

D. Start\nError: Oops

Solution

1. Step 1: Trace code execution inside try block

   It prints 'Start', then throws an error, so 'End' is skipped.

2. Step 2: Understand catch block behavior

   The catch block runs and prints 'Caught: Oops' using the error message.

3. Final Answer:

   Start\nCaught: Oops -> Option A

4. Quick Check:

   Throw stops try, catch prints error message [OK]

Hint: Throw stops try; catch handles error message [OK]

Common Mistakes:

• Expecting code after throw to run
• Missing error message in catch output
• Confusing catch block with finally

4. Identify the error in this code snippet:

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

medium

A. Division by zero causes a crash

B. try block syntax is incorrect

C. Missing error parameter in catch block

D. console.log is not allowed inside try

Solution

1. Step 1: Check catch block syntax

   In JavaScript, catch should have an error parameter like catch(error) to work properly.

2. Step 2: Understand division by zero behavior

   Division by zero returns Infinity, not an error, so no exception is thrown.

3. Final Answer:

   Missing error parameter in catch block -> Option C

4. Quick Check:

   catch needs error parameter [OK]

Hint: Always include error parameter in catch (e) [OK]

Common Mistakes:

• Assuming division by zero throws error
• Omitting error parameter in catch
• Thinking console.log causes error

5. You want to make a function that reads a JSON string and returns an object. If the JSON is invalid, it should return null without crashing. Which code correctly handles this?

hard

A. function parseJson(str) {
return JSON.parse(str);
}

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

C. function parseJson(str) {
if (typeof str === 'object') return str;
else return null;
}

D. function parseJson(str) {
return JSON.stringify(str);
}

Solution

1. Step 1: Understand JSON.parse behavior

   JSON.parse throws an error if the string is invalid JSON.

2. Step 2: Use try-catch to handle errors safely

   Wrapping JSON.parse in try-catch lets us catch errors and return null instead of crashing.

3. Final Answer:

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

4. Quick Check:

   try-catch safely parses JSON or returns null [OK]

Hint: Wrap JSON.parse in try-catch to avoid crashes [OK]

Common Mistakes:

• Not catching JSON.parse errors
• Returning wrong type on error
• Confusing JSON.stringify with parse