How to Fix JavaScript Errors
Published: 2023-05-15 03:02:33

Have you ever wondered why your code isn't working? What does that dreadful red message mean? Don't worry that message is there to help you. Let's begin with some of the common errors you will encounter or may have already seen.

## Error Types
The errors you face will generally be a syntax error or a logic error.

**Syntax Errors**
These errors are quite easy to fix because you will receive a message stating where the error occurred and what the error is.

![Syntax Error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aqrmuncgb1a1dhj4z4kt.png)

The message starts off by providing the path to the error. 

![Path](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v178u19ytqnaqd04liz7.png)

The path leads us to the 'index.js' file. The number '1' tells us that the error is on the first line of the 'index.js' file. Depending on which integrated development environment (IDE) you are using there may be a colon and a second number next to the first number indicating the character where the error starts.

![Error Message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wdw852fui1uwe510w1y.png)

Awesome! Now we know for sure that we have a syntax error. Unexpected identifier? What does that mean? Recall what we are doing on this line. We want to declare a variable with 'const'. Usually the problem is a misspelled word so let's check our spelling.

![Line Containing the Error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ium1pui9ilfo6by3uecj.png)

Looks like we misspelled 'const'. The 's' is missing! Let's fix it and see if that solves the problem.

![Error Free Array](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3m031vded3ngnggu9rrz.png)

Nice now our program is working and the error message is gone! Unexpected identifier is just one of the many syntax errors. If you would like to learn about all of the different types of syntax errors including range errors and type errors, I recommend visiting mdn web docs. {% embed https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors %}

**Logic Errors**
Now the errors that don't often involve a message. A syntax error stops the program part way through or prevents the program from running at all. Logic errors don't behave the same way. The program works but the results are not what we wanted or expected. 

![Random Number Program](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zeetf3xwxf9qc7w5bkxm.png)

![Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/peb3mttny4qbi8vh5344.png)

We want to make a program that returns a random number from 1 to 50. The problem is the program always returns 1. We didn't get a error message so we know there aren't any syntax errors. Let's backtrack and look at each part of the program.

Math.random() returns a random decimal number between 0 and 1.

![Math.random()](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q1xjdqa9je1ikotyplrw.png)

![Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vxt341ningfpjagyd5yw.png)

Math.floor() rounds a number down.

![Math.floor()](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1t30675e519kw14m73ar.png)

![Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ue9do3p4fs0d4gegimg0.png)

The above code will always return 0 since Math.random() returns a decimal number between 0 and 1. So let's add 1 to always have it return a value of 1.

![Added 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8rzfccp5qt2wj6tw0zhg.png)

![Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qdilreda7v5cgzs0p0f7.png)

Before we round the random number down we first need to multiply it by 50.

![Multiply by 50](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57bgsiytz7b41gjtm42g.png)

![Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ousy81ovyfa9510w54io.png)

Perfect, the program works! When you encounter a logic error you have to think about what you want your program to accomplish. If you aren't getting the expected results then dig into where you believe the error is and start dissecting your code.

## Conclusion
As a beginner you will run into many errors but don't let that discourage you. Error messages are not something to fear but rather something to be comfortable with. They are there to help you achieve the results you are looking for.