Try–catch block in Javascript - Mini Project: Build & Apply

Handling Errors with Try-Catch Block

📖 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.

🎯 Goal: You will create a program that tries to divide two numbers and uses a try-catch block to catch any errors, then display a friendly message.

📋 What You'll Learn

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

Create a variable called result and set it to null

Use a try block to divide numerator by denominator and assign to result

Use a catch block to catch any error and assign the string 'Cannot divide by zero' to result

Print the value of result

💡 Why This Matters

🌍 Real World

Try-catch blocks help apps avoid crashing when unexpected errors happen, like dividing by zero or reading missing files.

💼 Career

Understanding error handling is essential for writing reliable code in any software development job.

1

Create the numbers to divide

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

Javascript

# Your code here

Hint

Use const to create variables and assign the exact numbers.

2

Create a variable to hold the result

Create a variable called result and set it to null.

Javascript

const numerator = 10;
const denominator = 0;
# Your code here

Hint

Use let because result will change later.

3

Use try-catch to divide safely

Use a try block to divide numerator by denominator and assign it to result. Use a catch block to catch any error and assign the string 'Cannot divide by zero' to result.

Javascript

const numerator = 10;
const denominator = 0;
let result = null;
# Your code here

Hint

Throw an error manually if denominator is zero, then catch it to set result.

4

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('Divide by zero');
    }
    result = numerator / denominator;
} catch (error) {
    result = 'Cannot divide by zero';
}
# Your code here

Hint

Use console.log(result) to print the final message.

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