Throwing errors in Javascript - Mini Project: Build & Apply

Throwing errors

📖 Scenario: Imagine you are making a simple calculator app. You want to make sure users only enter numbers when they try to add two values. If they enter something else, you want to show a clear error message.

🎯 Goal: You will build a small program that checks if inputs are numbers. If not, it will throw an error with a helpful message.

📋 What You'll Learn

Create two variables with exact names and values

Create a helper variable to check input types

Use throw new Error() to raise an error if inputs are not numbers

Print the result or error message

💡 Why This Matters

🌍 Real World

Throwing errors helps programs stop when something goes wrong, so users get clear messages instead of confusing results.

💼 Career

Understanding error handling is important for writing reliable code and debugging in real software projects.

1

Create input variables

Create two variables called input1 and input2. Set input1 to the number 10 and input2 to the string "five".

Javascript

// Create variables input1 and input2 with the exact values
// Your code here

Hint

Use const to create variables. Remember to put quotes around strings.

2

Create a helper variable to check types

Create a variable called areNumbers that is true only if both input1 and input2 are numbers. Use the typeof operator to check each input.

Javascript

const input1 = 10;
const input2 = "five";
// Create variable areNumbers to check if input1 and input2 are numbers
// Your code here

Hint

Use typeof input1 === "number" and combine with && for both inputs.

3

Throw an error if inputs are not numbers

Write an if statement that checks if areNumbers is false. Inside the if, throw a new error with the message "Both inputs must be numbers". Otherwise, create a variable sum that adds input1 and input2.

Javascript

const input1 = 10;
const input2 = "five";
const areNumbers = typeof input1 === "number" && typeof input2 === "number";
// Use if statement to throw error if areNumbers is false
// Otherwise, create sum = input1 + input2
// Your code here

Hint

Use throw new Error("message") inside the if block.

4

Print the result or catch the error

Wrap the previous code in a try block. In the try, calculate the sum as before. In the catch block, print the error message using console.log(error.message). If no error, print the sum with console.log(sum).

Javascript

const input1 = 10;
const input2 = "five";
const areNumbers = typeof input1 === "number" && typeof input2 === "number";
// Wrap code in try-catch
// Print sum if no error, else print error.message
// Your code here

Hint

Use try { ... } catch (error) { ... } to handle errors and print messages.

Practice

1. What does the throw statement do in JavaScript?

easy

A. Stops the program and creates an error.

B. Catches an error and handles it.

C. Declares a new variable.

D. Runs a function asynchronously.

Solution

1. Step 1: Understand the purpose of throw

   The throw statement is used to create an error and stop normal program execution.

2. Step 2: Differentiate from error handling

   Unlike try...catch which handles errors, throw actually creates the error.

3. Final Answer:

   Stops the program and creates an error. -> Option A

4. Quick Check:

   throw creates error = A [OK]

Hint: Remember: throw creates errors, try...catch handles them [OK]

Common Mistakes:

• Confusing throw with try...catch
• Thinking throw handles errors
• Believing throw declares variables

2. Which of the following is the correct syntax to throw a new error with the message "Invalid input"?

easy

A. throw 'Invalid input';

B. throw error('Invalid input');

C. throw new Error('Invalid input');

D. throw new error('Invalid input');

Solution

1. Step 1: Recall the correct Error constructor usage

   In JavaScript, to create an error object, use new Error('message').

2. Step 2: Check syntax correctness

   Only throw new Error('Invalid input'); uses throw new Error('Invalid input'); which is correct syntax.

3. Final Answer:

   throw new Error('Invalid input'); -> Option C

4. Quick Check:

   Correct syntax uses new Error = C [OK]

Hint: Always use 'throw new Error' with capital E [OK]

Common Mistakes:

• Missing 'new' keyword
• Using lowercase 'error' instead of 'Error'
• Omitting parentheses

3. What will be the output of the following code?

try {
  throw new Error('Oops!');
} catch (e) {
  console.log(e.message);
}

medium

A. Oops!

B. Error: Oops!

C. undefined

D. No output

Solution

1. Step 1: Understand the throw and catch behavior

   The code throws an error with message 'Oops!'. The catch block catches it and logs e.message.

2. Step 2: Determine what e.message contains

   e.message is the string 'Oops!'. So console.log(e.message) prints 'Oops!'.

3. Final Answer:

   Oops! -> Option A

4. Quick Check:

   Logging error message prints 'Oops!' = A [OK]

Hint: Catch error and log e.message to see the message [OK]

Common Mistakes:

• Printing whole error object instead of message
• Expecting 'Error: Oops!' instead of just message
• Thinking no output occurs

4. Identify the error in this code snippet:

try {
  throw new Error('Fail');
} catch e {
  console.log(e.message);
}

medium

A. Incorrect use of throw keyword.

B. No error; code runs fine.

C. Error message string is invalid.

D. Missing parentheses around catch parameter.

Solution

1. Step 1: Check catch syntax

   In JavaScript, the catch block must have parentheses around the error parameter, like catch (e).

2. Step 2: Identify the syntax error

   The code uses catch e without parentheses, which causes a syntax error.

3. Final Answer:

   Missing parentheses around catch parameter. -> Option D

4. Quick Check:

   Catch parameter needs parentheses = B [OK]

Hint: Always write catch with parentheses: catch (e) [OK]

Common Mistakes:

• Omitting parentheses in catch
• Misplacing throw statement
• Confusing error message with syntax error

5. You want to throw an error only if a user input is empty or null. Which code correctly throws an error in this case?

hard

A. if (input) throw new Error('Input required');

B. if (!input) throw new Error('Input required');

C. if (input == null) throw new error('Input required');

D. if (input === '') throw Error('Input required');

Solution

1. Step 1: Understand falsy values for empty or null input

   In JavaScript, !input is true if input is null, undefined, empty string, 0, or false.

2. Step 2: Check which option correctly throws error for empty or null

   if (!input) throw new Error('Input required'); uses if (!input) throw new Error('Input required'); which covers empty string and null correctly with proper syntax.

3. Final Answer:

   if (!input) throw new Error('Input required'); -> Option B

4. Quick Check:

   Use !input to check empty/null and throw Error = D [OK]

Hint: Use if (!input) to catch empty or null inputs [OK]

Common Mistakes:

• Using lowercase 'error' instead of 'Error'
• Throwing error only for empty string but missing null
• Throwing error when input is valid