JavaScript Notes

JavaScript Try Catch Finally – Error Handling Complete Guide

Master JavaScript try...catch...finally with error flow diagrams, async error handling, nested try-catch, real-world examples, common mistakes, and interview Q&A.

try...catch...finally is JavaScript's primary mechanism for handling runtime errors gracefully — preventing crashes and giving you a chance to recover, log, or show user-friendly messages when something goes wrong.

📊 Error Flow Diagram

Example

┌─────────────────────────────────────────────────┐ │ try { ... } │ │ │ │ Code runs here │ │ │ │ │ ├── No error ──────────────────────┐ │ │ │ │ │ │ └── Error thrown ──────────┐ │ │ └───────────────────────────────────│───────│────┘ ▼ │ ┌───────────────────────────────────────────│────┐ │ catch (error) { ... } │ │ │ │ │ │ Receives the error object │ │ │ Recover, log, or rethrow │ │ └───────────────────────────────────────────│────┘ ▼ ┌─────────────────────────────────────────────────┐ │ finally { ... } │ │ │ │ ALWAYS runs — with or without error │ │ Perfect for cleanup (close DB, stop loading) │ └─────────────────────────────────────────────────┘

💻 Example 1 — Basic Try...Catch

js example

try {
  const data = JSON.parse('{ "name": "Riya" }');   // valid JSON
  console.log("Parsed:", data.name);

  JSON.parse("{ bad json }");   // throws SyntaxError
  console.log("This never runs");
} catch (error) {
  console.log("Error caught!");
  console.log("Type:", error.constructor.name);
  console.log("Message:", error.message);
}

console.log("Program continues after catch");

Output

Parsed: Riya
Error caught!
Type: SyntaxError
Message: Unexpected token 'b', "{ bad json }" is not valid JSON
Program continues after catch

💻 Example 2 — Try...Catch...Finally

js example

function loadConfig(configString) {
  console.log("⏳ Loading config...");
  try {
    const config = JSON.parse(configString);
    console.log("✅ Config loaded:", config.theme);
    return config;
  } catch (error) {
    console.log("❌ Failed to parse config:", error.message);
    return { theme: "default" };   // fallback value
  } finally {
    // Always runs — whether parse succeeded or failed
    console.log("🔚 Config loading complete");
  }
}

console.log("--- Valid config ---");
loadConfig('{"theme": "dark", "language": "en"}');

console.log("\n--- Invalid config ---");
loadConfig("not valid json at all");

Output

--- Valid config ---
⏳ Loading config...
✅ Config loaded: dark
🔚 Config loading complete

--- Invalid config ---
⏳ Loading config...
❌ Failed to parse config: Unexpected token 'o', "not valid json at all" is not valid JSON
🔚 Config loading complete

💻 Example 3 — Catching Different Error Types

Example

Output

HELLO WORLD
🔴 Type Error: Input cannot be null or undefined

🔴 Type Error: Expected string, got number

🟡 Range Error: Input cannot be empty

💻 Example 4 — Async/Await with Try...Catch

Example

// Simulated async API call function fetchUser(id) { return new Promise((resolve, reject) => { setTimeout(() => { if (id === 1) resolve({ id: 1, name: "Riya", email: "riya@wohotech.in" }); else reject(new Error(`User ${id} not found`)); }, 100); }); } async function displayUser(id) { console.log(`Fetching user ${id}...`); try { const user = await fetchUser(id); console.log(`✅ Found: ${user.name} (${user.email})`); } catch (error) { console.log(`❌ Error: ${error.message}`); } finally { console.log(`Done fetching user ${id}`); } } displayUser(1); displayUser(99);

Output

Fetching user 1...
Fetching user 99...
✅ Found: Riya (riya@wohotech.in)
Done fetching user 1
❌ Error: User 99 not found
Done fetching user 99

💻 Example 5 — Nested Try...Catch

js example

function processOrder(order) {
  try {
    // Outer try handles general errors
    if (!order) throw new Error("Order is required");

    try {
      // Inner try handles payment errors specifically
      if (!order.paymentMethod) throw new Error("Payment method missing");
      console.log(`💳 Processing payment via ${order.paymentMethod}`);
    } catch (paymentError) {
      console.log(`⚠️ Payment issue: ${paymentError.message} — using default`);
      order.paymentMethod = "cash";
    }

    console.log(`📦 Order #${order.id} processed via ${order.paymentMethod}`);

  } catch (error) {
    console.log(`🚫 Fatal error: ${error.message}`);
  }
}

processOrder({ id: 101, paymentMethod: "UPI" });
processOrder({ id: 102 });            // no payment method
processOrder(null);                   // null order

Output

💳 Processing payment via UPI
📦 Order #101 processed via UPI
⚠️ Payment issue: Payment method missing — using default
📦 Order #102 processed via cash
🚫 Fatal error: Order is required

📋 Error Types in JavaScript

Error Type	When it occurs
`Error`	Generic base error
`TypeError`	Wrong type used — calling non-function, accessing null
`RangeError`	Value outside allowed range — `new Array(-1)`
`ReferenceError`	Variable not defined
`SyntaxError`	Invalid code / invalid JSON — `JSON.parse("{bad}")`
`URIError`	Invalid URI encoding
`EvalError`	Error in `eval()`

⚠️ Common Mistakes

❌ Mistake 1 — Silent Error Swallowing

js example

try {
  riskyOperation();
} catch (error) {
  // Empty catch — error is hidden, impossible to debug!
}

js example

// GOOD — always at minimum log the error
try {
  riskyOperation();
} catch (error) {
  console.error("Operation failed:", error.message);
}

❌ Mistake 2 — Wrapping Too Much Code in One Try Block

js example

// BAD — can't tell which line caused the error
try {
  const data   = fetchData();
  const parsed = parseData(data);
  const result = transformData(parsed);
  saveResult(result);
} catch (error) {
  console.log(error.message); // Which step failed??
}

❌ Mistake 3 — Async Errors Not Caught Without await/try-catch

js example

// BAD — promise rejection is unhandled!
async function load() {
  const data = fetchFromAPI();  // ← missing 'await'!
  console.log(data.name);       // TypeError: Cannot read properties of undefined
}

// GOOD
async function load() {
  try {
    const data = await fetchFromAPI();
    console.log(data.name);
  } catch (error) {
    console.error("Load failed:", error.message);
  }
}

❌ Mistake 4 — Returning from `finally` Overrides `catch` Return

js example

function test() {
  try {
    throw new Error("oops");
  } catch (e) {
    return "from catch";
  } finally {
    return "from finally";   // ← overrides catch's return!
  }
}
console.log(test());

Output

from finally

🎯 Key Takeaways

try wraps risky code; catch handles errors; finally always runs for cleanup
The catch block receives an Error object with .message, .name, .stack
Use error instanceof TypeError to handle different error types differently
async/await errors must be inside try...catch — use await on every async call
Never silently swallow errors — always log, recover, or rethrow
finally is perfect for releasing resources: closing files, stopping loading spinners, clearing timeouts
Avoid returning from finally — it can suppress errors and override catch returns

❓ Interview Questions

Q1. What is try...catch...finally in JavaScript? > It's a control flow structure for error handling. Code in try runs first. If an error is thrown, execution jumps to catch where you handle it. finally runs after both — no matter whether an error occurred or not.

Q2. What properties does the error object have? > error.message (human-readable description), error.name (error class name like "TypeError"), error.stack (stack trace showing where the error occurred). Custom errors can add more properties.

Q3. Does finally always run? > Yes — finally runs even if try succeeds, if catch runs, or if a return is hit inside try or catch. The only exceptions are process.exit(), infinite loops, or power failure.

Q4. How do you handle errors in async/await functions? > Wrap await calls in try...catch. Without try...catch, unhandled promise rejections will cause warnings in Node.js and can crash the process in newer versions.

Q5. What is the difference between throw inside catch and a normal return? > Rethrowing (throw error) passes the error up to the next enclosing catch or crashes if none exists. A normal return from catch resumes normal execution in the outer scope.

Q6. Can you have multiple catch blocks? > No — JavaScript only allows one catch block per try. Distinguish error types inside the single catch using instanceof: if (error instanceof TypeError) { ... }.

Q7. What happens if an error is thrown inside catch? > It propagates to the next outer try...catch. The finally block still runs before propagation.

Q8. What is the difference between try...catch and .catch() on a Promise? > try...catch handles synchronous errors and async errors when used with await. .catch() handles Promise rejections in the .then() chain pattern. With async/await, try...catch is preferred for cleaner, more readable code.

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript Try Catch Finally – Error Handling Complete Guide.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, error, handling, try

Continue learning this concept

Error HandlingJavaScript Custom Errors – Extend Error Class, Custom Error Types & instanceofLearn to create custom error classes in JavaScript by extending Error. Build ValidationError, NotFoundError, NetworkError with extra properties and instanceof checks.Error HandlingJavaScript Debugging – console Methods, DevTools, Breakpoints & Error Stack TracesMaster JavaScript debugging: console.log, console.table, console.trace, DevTools breakpoints, debugger statement, error stack traces, and debugging async code.Error HandlingJavaScript throw Statement – Throw Errors, Custom Messages & Error TypesLearn the JavaScript throw statement: throw Error objects, custom error classes, validation guards, and best practices for intentional error signaling with interview Q&A.Advanced JavascriptJavaScript apply() Method - Complete Guide with ExamplesMaster JavaScript apply() method with syntax, this binding, array arguments, function borrowing, real-world use cases, common mistakes, and interview Q&A.Advanced JavascriptJavaScript bind() Method - Complete Guide with ExamplesMaster JavaScript bind() with permanent this binding, partial application, event handlers, currying patterns, common mistakes, and top interview Q&A.Advanced JavascriptJavaScript call() Method - Complete Guide with ExamplesMaster JavaScript call() method: this binding, syntax, constructor inheritance, function borrowing, strict mode differences, and top interview Q&A.

PreviousJavaScript throw Statement – Throw Errors, Custom Messages & Error Types NextTop 30 JavaScript Closure Interview Questions & Answers 2026

📊 Error Flow Diagram

💻 Example 1 — Basic Try...Catch

💻 Example 2 — Try...Catch...Finally

💻 Example 3 — Catching Different Error Types

💻 Example 4 — Async/Await with Try...Catch

💻 Example 5 — Nested Try...Catch

📋 Error Types in JavaScript

⚠️ Common Mistakes

❌ Mistake 1 — Silent Error Swallowing

❌ Mistake 2 — Wrapping Too Much Code in One Try Block

❌ Mistake 3 — Async Errors Not Caught Without await/try-catch

❌ Mistake 4 — Returning from finally Overrides catch Return

🎯 Key Takeaways

❓ Interview Questions

Continue learning this concept

📊 Error Flow Diagram

💻 Example 1 — Basic Try...Catch

💻 Example 2 — Try...Catch...Finally

💻 Example 3 — Catching Different Error Types

💻 Example 4 — Async/Await with Try...Catch

💻 Example 5 — Nested Try...Catch

📋 Error Types in JavaScript

⚠️ Common Mistakes

❌ Mistake 1 — Silent Error Swallowing

❌ Mistake 2 — Wrapping Too Much Code in One Try Block

❌ Mistake 3 — Async Errors Not Caught Without await/try-catch

❌ Mistake 4 — Returning from finally Overrides catch Return

🎯 Key Takeaways

❓ Interview Questions

Continue learning this concept

❌ Mistake 4 — Returning from `finally` Overrides `catch` Return

❌ Mistake 4 — Returning from `finally` Overrides `catch` Return