Skip to main content

Command Palette

Search for a command to run...

What are the errors in JavaScript

Updated
4 min read
What are the errors in JavaScript
S
A front-end developer who’s always learning, building projects, and writing blogs to simplify web concepts

An error is a problem that stops your program from running as expected. In JavaScript, errors can happen at different stages, but the ones you will deal with most are runtime errors.

For example

let user = null;
console.log(user.name);

This throws an error because you are trying to access a property on null.

Common types of errors you will see:

  • Syntax errors

  • Reference errors

  • Type errors

Errors like these can break your application if you do not handle them.


Why error handling matters

If your app crashes every time something goes wrong, users will leave. Error handling helps you control what happens when things fail.

Instead of crashing, your app can:

  • Show a useful message

  • Retry an operation

  • Log the issue for debugging

This is called graceful failure. The app continues to work even when something goes wrong.


Using try and catch

JavaScript provides a built-in structure to handle errors using try and catch.

try {
  let data = JSON.parse("invalid json");
} catch (error) {
  console.log("Something went wrong:", error.message);
}

How it works:

  • Code inside try runs normally

  • If an error occurs, execution jumps to catch

  • The error object gives details about what went wrong

This prevents your program from crashing and gives you control over the failure.


The finally block

The finally block runs no matter what happens. Whether the code succeeds or fails, this block always executes.

try {
  console.log("Trying...");
} catch (error) {
  console.log("Error occurred");
} finally {
  console.log("This always runs");
}

You usually use finally it for cleanup tasks, like:

  • Closing connections

  • Stopping loaders

  • Releasing resources


Throwing custom errors

Sometimes you need to create your own errors instead of relying on JavaScript defaults.

function withdraw(amount, balance) {
  if (amount > balance) {
    throw new Error("Insufficient balance");
  }
  return balance - amount;
}

Here, you are manually throwing an error using throw.

This is useful when:

  • You want to enforce business rules

  • You need clear and meaningful error messages

  • You want to stop execution intentionally

You can then handle this error using try and catch.


Execution flow of try, catch, finally

Here is the basic flow:

  1. Code enters the try block

  2. If no error occurs, catch is skipped

  3. If an error occurs, catch runs

  4. Finally runs in both cases

Think of it like a safety net. The try block is your main logic, catch handles failures, and finally ensures cleanup.


A simple real-world example

function fetchUserData() {
  try {
    let data = JSON.parse('{"name": "John"}');
    console.log(data.name);
  } catch (error) {
    console.log("Failed to fetch user data");
  } finally {
    console.log("Request completed");
  }
}

fetchUserData();

Even if parsing fails, your program continues to run and gives useful output.


Debugging benefits

Error handling also makes debugging easier.

Instead of random crashes, you get:

  • Clear error messages

  • Controlled logs

  • Better understanding of where things failed

This saves time when your application grows larger.


Conclusion

Errors are part of writing JavaScript, and ignoring them leads to unstable applications. By using try, catch, and finally, you can control how your code behaves when something goes wrong.

Once you start throwing your own errors and handling them properly, your code becomes more predictable and easier to maintain.

Handling errors well is not an advanced skill. It is a basic habit that every developer should build early.

JavaScript Journey: From Basics to Core Concepts

Part 16 of 29

This series documents my journey of learning JavaScript and breaking down important concepts in a simple way. Each article covers a core JavaScript topic with clear explanations and beginner-friendly examples. From basic concepts to essential JavaScript features, the goal of this series is to make JavaScript easier to understand while practicing and sharing what I learn.

Up next

Spread vs Rest Operators in JavaScript

When working with arrays, objects, and functions in JavaScript, you will often see this syntax: ...This is used in two ways: the spread operator and the rest operator. Even though they look the same,