Throwing errors in Javascript - Step-by-Step Execution

Concept Flow - Throwing errors

Start

↓

Check condition

Yes↓

Throw error

↓

Catch error?

No→Program stops

Yes↓

Handle error

↓

Continue or Exit

The program checks a condition, throws an error if needed, then either catches and handles it or stops.

Execution Sample

Javascript

function checkAge(age) {
  if (age < 18) {
    throw new Error('Too young');
  }
  return 'Allowed';
}

checkAge(15);

This code throws an error if age is less than 18, otherwise returns 'Allowed'.

Execution Table

Step	Action	Condition	Result	Output/Error
1	Call checkAge(15)	age = 15	Check if 15 < 18	No output yet
2	Condition true	15 < 18	Throw new Error('Too young')	Error thrown: Too young
3	No catch block	Error not caught	Program stops	Uncaught Error: Too young

💡 Error thrown at step 2 and not caught, so program stops with uncaught error.

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
age	undefined	15	15	15

Key Moments - 2 Insights

Why does the program stop after throwing the error?

Because there is no catch block to handle the error, as shown in execution_table step 3, the error is uncaught and stops the program.

What happens if the condition is false?

If the condition is false, the throw statement is skipped and the function returns normally, but in this example, the condition is true (step 2).

Visual Quiz - 3 Questions

Look at the execution table, what is the output at step 2?

A 'Allowed'

B Error thrown: Too young

C No output

D Program continues normally

💡 Hint

See execution_table row 2, the error is thrown when age < 18.

At which step does the program stop due to an uncaught error?

A Step 1

B Step 2

C Step 3

D It never stops

💡 Hint

Check execution_table row 3, program stops because error is not caught.

If we call checkAge(20), what would change in the execution table?

A Condition false, function returns 'Allowed'

B Program stops at step 3

C Error thrown at step 2

D Error thrown at step 1

💡 Hint

Refer to variable_tracker and condition check in execution_table step 2.

Concept Snapshot

Throw errors with throw new Error('message')
Use if conditions to decide when to throw
If error not caught, program stops
Use try-catch to handle errors
Throwing interrupts normal flow
Errors carry messages for debugging

Full Transcript

This example shows how JavaScript throws errors using the throw statement. The function checkAge checks if the age is less than 18. If yes, it throws an error with the message 'Too young'. The execution table traces the steps: calling the function with 15, checking the condition, throwing the error, and stopping the program because there is no catch block. Variables like age are tracked through the steps. Key moments explain why the program stops and what happens if the condition is false. The quiz asks about the output at throwing, when the program stops, and what changes if age is 20. The snapshot summarizes how throwing errors works and how it affects program flow.

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