JavaScript Errors — why won’t you do what I meant to tell you to do?

This is a quick overview on errors you’ll see as a JavaScript developer. It is not all of the errors, just some common ones. Let’s decipher what has gone wrong! (It always can go wrong, and the frustration is real!)

Before we start I have a few basic debugging tips.

1. Use console.log()
2. Did you save your changes? All of them? Save again to be sure! CTRL + S or Command ⌘ + S should be a constant action of your left hand.
3. Chrome Dev Tools keyboard shortcuts:

• Mac: Command ⌘ + option + i
• Windows/Linux: Shift + CTRL + i

Note: Be sure to use console.log() in meaningful places, and put something descriptive in the log.

Something similar to:

console.log( “ log-in GET request HERE !!!!!!!!!!!******* ” )

• This is because it can be hard to spot the specific error in a vast sea of errors within the console. Hence the multiple exclamation marks and asterisks.
• It is important to see what is working and how far it works within a given function. Appropriate labels and commented code is just common sense. Be your own friend and comment your code, early and often.

Right so, let’s see some red.

How do I begin to know where to look?

Error Search — by Kathleen

Did you know that the errors will tell you the line of code where the error occurred?

Now, it’s not spot on correct every time, but might be a good starting point!

I have added arrows to my examples, both in the console and the Chrome Dev Tools.

We will look at 5 errors in this article:

1. ReferenceError
2. TypeError
3. SyntaxError
4. Unexpected Token
5. Maximum Call Stack Exceeded

Hello, My Name is Label — by Kathleen

ReferenceError

ReferenceError

ReferenceError Meaning: You have tried to refer to something that doesn’t exist. So you’ll see : “ReferenceError: something is not defined”.

Example: A variable has not been declared properly before it was used. In this example line 3 tried to log out a variable that has never been declared.

Fix it:

• Go to the specified line in the code and also check above it.
• Check your spelling and if all declarations are correct, careful with “=” v.s. “ : ” for things like variables v.s. objects!
• Check for commented out code.

TypeError

TypeError

TypeError Meaning: You tried to perform an operation on a value of the incorrect type. You have your data types confused or are misusing a method. “TypeError: something is not a function”.

Example: Using a string method on a numerical value.

In this example, the error comes from when you call the function and the error message specifies the return statement on line 4. You cannot capitalize a number. So the type of method is wrong or the data type of the variable is wrong, either way you get an error. You need to pick one type and stick to it.

Fix it:

• Go to the indicated error: both the line indicated in the error message and the function where the code issue is called.
• What type of data were you trying to use: String? Number? Boolean? Whatever you have used…. JavaScript doesn’t like it, you’ve confused something somewhere. So do a re-think and change it.
• There are built in data structures in JavaScript. Information on these can be found here: JavaScript Data Types and Data Structures

More Details: Uncaught TypeError ​​

Needle in a Haystack — by Kathleen

SyntaxError

SyntaxError Meaning: You have a typo or something is missing. This one can be kinda… anywhere. Hence my needle in the haystack drawing. The line of code in the error message might not be the exact location of the problem. “SyntaxError: unexpected token blah blah blah”.

Example: You forgot to close your brackets, parentheses, or you added an extra one somewhere. In my above code you see the error message says line 5, there is no line 5. So that’s a hint: the code kept going past what you wrote, you forgot to close the brackets.

Fix it:

• Check all the closing brackets, parentheses, semicolons.
• Recommend you add in “Prettier” a VSCode code formatter, or similar IDE add-on.
• Check your spelling for the variables and the functions.
• Check your logic operators, stuff like how “ == ” is not “ === ”.

Error Token — by Kathleen

Unexpected Token

Unexpected Token Meaning: There’s something in the code which JavaScript wasn’t expecting to see. Or something is out of place. Another variation of SyntaxErrror, but this time with the added “Unexpected Token”.

Typo-time!

Example: You have failed to pair up your “ ( ) ” or “ { } ”or “ [ ] ”. You also might have an extra closing bracket where you don’t need one.

In the above code example the unexpected token is a “;” but there is no line number in the error message so we have to look for all the semicolons. Mercifully… here there are only three. But the semicolons are correct…right!? Keep looking…the second semicolon has a comma “,” before the offending semicolon. Example is circled in red. This comma should not be inside your for loop. Removing it will fix this error.

Fix it:

• Check the error message, what is the wrong token, and look for that in your code. Not always exact… but just check it.
• Careful, not all unexpected tokens are the only offending error. It might be what comes before the JavaScript error message’s best guess. As seen with the example code error above.
• Count your opening and closing brackets. Avoid this by evenly tabbing your code.
• Check for typos. Many typos means it might be time to take a break, stretch, be outside for a bit. Most code editors will have squiggly lines warning you that something ain’t right. Pay attention to these while typing if you want to save yourself time.

Maximum Call Stack Exceeded

Meaning: JavaScript is exhausted. “Uncaught RangeError: Maximum call stack size exceeded”. There is an error in your logic or your recursion. The error is to the point that the call stack has hit the absolute limit. You will need to close that tab. Just try to make it stop.

Example: Before this screen shot was taken the console on the bottom got to over 8,000 logs. That was across 1–2 mins, so several console.logs() a second. Major ruh-row!

You can see that line 11 is where the error message says it has gone wrong. Again JavaScript is kind of looking for something else in our code that might be further down, but isn’t… and it probably should be! Hint: something is missing that would be a ‘stopper’ to the code.

Since line 11 is blank we can look above. We forgot to give JavaScript a reason to stop calling this function. So it will call it incessantly until it can’t carry on.

The issue here is that the logic inside the base case is wrong, shown with the orange arrow.

Fix it:

• Kill the tab or the request, just make it stop trying to execute the code.
• It is probably frozen, so get a cup of tea while you wait. ❤
• Now that the fire is subdued: check the logic, where is your base case, how does the code exit the loop or recursion, did you mean to do < or >, did you check all of the operators?

Check out all about recursion in JavaScript here.

Errors happen. It’s how we get past them that matters.

Public Service Announcement:

If you have been affected by the issues in this article, please do not throw your computer out the window.

Take some time to yourself. Step away from the computer and go outside. Enjoy people and sunshine again. Exit the matrix.

Or just keep googling “ what does error message _f#!@*&% _ mean” until you cry yourself to sleep.

Whatever works for you. ❤

I hope this helped anyone haplessly guessing whatever it was that went wrong in your code.

AND! Let me know your error questions! I love me a good bug to fix. But, don’t come here for prompt answers. That’s what StackOverflow is for.

Thanks a million!