DEV Community

loading...
Cover image for Three Common Types of Errors in JavaScript

Three Common Types of Errors in JavaScript

Askin Ekinci
A passionate bootcamp trainee
・2 min read

Hello everyone, in my very first blog post, I would like to introduce myself first and then have a quick look at what three types of errors in JavaScript are and how we are able to fix them.

Let’s start with me. I have been working as an Avionics Technician for a long time. When the pandemic started in the first quarter of 2020, the company I worked for put me in furlough for two months as all flights were suspended. I am not a person who stays at home just enjoying the time without knowing anything for the future with the risk of losing my job. Then, I was luckily introduced with Code Your Future where it is combined with brilliant volunteers and trainees who are aimed at creating a new life and career opportunity. After I met all entry requirements, I was accepted into a family-like environment to start learning coding. In my coding journey, I made a lot of mistakes and I was sometimes trying to pull my hair even if I don’t have any. While I was challenging the errors, one of my friends who is a Senior Developer encouraged me saying that if your code works at the first attempt, it might be something wrong you are doing and you need to look at your code one more time. I believe that learning from mistakes makes us stronger and it helps consolidate our knowledge. Now, let’s talk about three common errors we can come across in JavaScript.

1. Syntax Errors: These errors occur when pre-defined syntax of the language is not met and they are detected while compiling or parsing source code.

image

           Syntax Error: missing  )  after condition.
Enter fullscreen mode Exit fullscreen mode

2. Reference Errors: These errors happen when a non-existent variable is referenced.

image

 Reference Error: “grade” is not defined. It is simply misspelled.
Enter fullscreen mode Exit fullscreen mode

3. Type Errors: These errors occur when an operation couldn’t be performed due to the fact that a value is not expected type.

image

   TypeError: Cannot read property 'addEventListener' of null. 
Enter fullscreen mode Exit fullscreen mode

As .querySelector accepts a CSS selector as an input, a dot is to be added before add-btn in the first line of code in order to call the correct element from HTML file.

All I can say is that I like the errors once I know how to fix them. Happy coding!

Discussion (0)