Common JavaScript errors to watch out for (what what gets me everyday)

An older version of this was originally posted on my blog

In the past few weeks, I have been going back through freeCodeCamp’s JavaScript course in order to actually complete it this time. One of the quickest parts of the course is the debugging part. It goes through several common error types you’ll find in JavaScript. Below is sort of a review of that, along with my thoughts and experiences making these errors.

1. Wrong data type – JavaScript has several data types (number, string, object, symbol, etc.) and losing track of what variables are what data type happens to me all the time, especially as a program gets more complicated. Sometimes you need to move input through a function and change the data type. If you mess up the data type, your output will not be what you want!

2. Misspelling – Computers have gotten better at finding spelling errors but they can still happen! I have called misspelled functions before and invoked variables with incorrect spelling. When nothing happens when I execute the program, I let out a sigh and start looking through my code only to find that I switched two letters in my spelling of a variable.

3. Mismatched quotation marks – In JavaScript, if you have a string starting with a single-quote ( ” ), you have to finish it with a single-quote. If you start a string with a double-quote ( “” ), then you need to finish it with a double-quote. I haven’t had too much trouble here, since I consistently write JS strings with double-quotes and most code editors now use various colors to signify strings, numbers, functions, and more, and you can tell by the color if you closed your string properly.

4. Quotation marks inside of strings - This isn't exactly an error by itself, but it's tricky (and is why I like using double-quotes for strings). The general rule here is: Use opposite types of quotation marks inside a string that you use to surround the string. For example, are you using single-quotes around your string? Then use double-quotes if you need to quote anything inside your string.

5. No closing parenthesis/brackets – Similarly, when you use opening parentheses or brackets, you have to use closing parentheses, otherwise you’ll return an error in your code. Again, I don’t struggle too much with this since I’ve built a habit to automatically code in closing brackets/parenthesis when I write. Also, a lot of code editors will automatically add these. One thing to watch out for (which gets me a lot) is typing a closing bracket/parenthesis after the code editor adds one. Then you’ll have two! And an error on top!

With these errors comes some handy tips that I’ve picked up to help you avoid errors and troubleshoot when they appear.

Number 1 is using your browser console to test parts of your program. Chrome and Firefox both have developer tools which include a JavaScript console. You can copy + paste some JavaScript code into the console to test it.

Secondly, to return results in the console, you can use the handy console.log() function, where the output you want to appear will go between the ( ). Alternatively, if the JS console is full of a bunch of stuff and you need to clear it out to start fresh, you can use the console.clear() function to do just that. Give it a try!

Lastly, and one of my favorites, is the typeof operator. You can type typeof 5 for example to figure out what data type the 5 is (spoiler: it’s a number). Another example would be typeof "Hello there!" which is a string.

Hopefully, this helps you out if you are starting to code. It’s a fun adventure! If you have any other common errors you experience and ways to solve them, drop them in the comments below.