Why error handling is required in Javascript - See It in Action

Why error handling is required

📖 Scenario: Imagine you are building a simple calculator app that divides two numbers. Sometimes users might enter zero as the divisor, which causes an error. You want to handle this error gracefully so the app does not crash and shows a friendly message instead.

🎯 Goal: Learn why error handling is important by creating a small program that divides two numbers and handles division by zero errors.

📋 What You'll Learn

Create two variables called numerator and denominator with exact values 10 and 0

Create a variable called result to store the division result

Use a try block to perform the division numerator / denominator

Use a catch block to catch any errors and set result to the string 'Error: Cannot divide by zero'

Print the value of result

💡 Why This Matters

🌍 Real World

In real apps, users can enter wrong data or unexpected things can happen. Error handling keeps apps running smoothly and helps users understand problems.

💼 Career

Knowing how to handle errors is important for all programmers to build reliable and user-friendly software.

1

DATA SETUP: Create numerator and denominator variables

Create two variables called numerator and denominator with values 10 and 0 respectively.

Javascript

# Create variables numerator and denominator with values 10 and 0
// Your code here

Hint

Use const numerator = 10; and const denominator = 0;

2

CONFIGURATION: Create a result variable

Create a variable called result and set it to null.

Javascript

const numerator = 10;
const denominator = 0;
// Create a variable result and set it to null
// Your code here

Hint

Use let result = null; to create the variable.

3

CORE LOGIC: Use try-catch to handle division by zero

Use a try block to divide numerator by denominator and assign it to result. Use a catch block to set result to the string 'Error: Cannot divide by zero' if an error occurs.

Javascript

const numerator = 10;
const denominator = 0;
let result = null;
// Use try-catch to divide numerator by denominator
// Your code here

Hint

Check if denominator is zero inside try, throw an error, and catch it to set result.

4

OUTPUT: Print the result

Write console.log(result) to display the value of result.

Javascript

const numerator = 10;
const denominator = 0;
let result = null;
try {
    if (denominator === 0) {
        throw new Error('Cannot divide by zero');
    }
    result = numerator / denominator;
} catch (error) {
    result = 'Error: Cannot divide by zero';
}
// Print the result
// Your code here

Hint

Use console.log(result); to show the output.

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