Javascript errors and how to fix them

JavaScript can be a nightmare when debugging: some errors it throws can be very difficult to understand at a glance, and the line numbers produced are also not always useful. Wouldn't it be useful to have a list, looking at which, you can understand the meaning of errors and how to correct them? Here he is!

Below is a list of weird errors in javascript. Different browsers may produce different messages about the same error, so several examples are given where possible.

How to read errors?

Before the list itself, let's quickly take a look at the structure of the error message. Understanding the structure helps to understand the mistakes, and you will get fewer problems if you stumble upon errors that are not represented in this list.

A typical Chrome error looks like this:
')

Uncaught TypeError: undefined is not a function 

The structure of the error is as follows:

1. Uncaught TypeError : this part of the message is usually not very useful. Uncaught means that the error was not intercepted in catch , and TypeError is the name of the error.
2. undefined is not a function : this is the same part about the error. In the case of error messages, you need to read them directly literally. For example, in this case, it means that the code tried to use the value undefined as a function.

Other webkit browsers, such as Safari, generate errors in roughly the same format as Chrome. Errors from Firefox are similar, but do not always include the first part, and the latest versions of Internet Explorer also give out simpler errors, but in this case it is not simple - it does not always mean better.

Now to the errors themselves.

Uncaught TypeError: undefined is not a function

Associated errors: number is not a function, not a function, not a function, an error: 'foo' is not a function, a function Expected

Occurs when an attempt is made to call a value as a function, when the value is not a function. For example:

 var foo = undefined; foo(); 

This error usually occurs if you are trying to call a function for an object, but are sealed in the name.

 var x = document.getElementByID('foo'); 

Non-existent properties of an object defaults to undefined , which causes this error.

Other variations, such as “number is not a function” occur when trying to call a number, as if it were a function.

How to correct the error: make sure that the function name is correct. For this error, the line number usually points to the correct place.

Uncaught ReferenceError: Invalid left-hand side in assignment

Related errors: Uncaught exception: ReferenceError: Cannot assign to 'functionCall ()', Uncaught exception: ReferenceError: Cannot assign to 'this'

Caused by an attempt to assign a value to something that cannot be assigned a value.

The most common example of this error is the condition in if:

 if(doSomething() = 'somevalue') 

In this example, the programmer accidentally used one equal sign instead of two. The expression “left-hand side in assignment” refers to the left side of the equal sign, and, as can be seen in this example, the left side contains something that cannot be assigned a value, which leads to an error.

How to correct the error: make sure that you are not trying to assign a value to the result of a function or the keyword this .

Uncaught TypeError: Converting circular structure to JSON

Related errors: Uncaught exception: TypeError: JSON.stringify: Not an acyclic Object, TypeError: cyclic object value, Circular reference

Always called by a circular reference in the object, which is then passed to JSON.stringify .

 var a = { }; var b = { a: a }; ab = b; JSON.stringify(a); 

Since a and b in the example above have links to each other, the resulting object cannot be cast to JSON.

How to fix the error: remove the circular links, as in the example above, from all the objects that you want to convert to JSON.

Unexpected token;

Related errors: Expected), missing) after argument list

The JavaScript interpreter was expecting something, but did not find it there. Usually caused by missing curly, round or square brackets.

The token in this error can be different - it can be written “Unexpected token]”, “Expected {” or something else.

How to correct the error: sometimes the line number does not indicate the correct location, which makes it difficult to correct the error.

Error with [] {} () is usually caused by a mismatched pair. Check if all your brackets have a closing pair. In this case, the line number usually indicates something else, rather than a problem character.

Unexpected / associated with regular expressions. The line number for this case is usually correct.

Unexpected; usually caused by a symbol; inside an object or array literal, or a function call argument list. The line number will usually also be true for this case.

Uncaught SyntaxError: Unexpected token ILLEGAL

Bugs related: Unterminated String Literal, Invalid Line Terminator

In the string literal, the closing quote is missing.

How to correct the error: make sure that all strings have correct closing quotes.

Uncaught TypeError: Cannot read property 'foo' of null, Uncaught TypeError: Cannot read property 'foo' of undefined

Related errors: TypeError: someVal is null, Unable to get property 'foo' of undefined or null reference

Attempting to read null or undefined as if it were an object. For example:

 var someVal = null; console.log(someVal.foo); 

How to fix the error: usually caused by typos. Check if all variables used next to the line indicating the error are correctly named.

Uncaught TypeError: Cannot set property 'foo' of null, Uncaught TypeError: Cannot set property 'foo' of undefined

Related errors: TypeError: someVal is undefined, Unable to set property 'foo' of undefined or null reference

Attempting to write null or undefined as if it were an object. For example:

 var someVal = null; someVal.foo = 1; 

How to fix the error: this is also usually caused by errors. Check the variable names next to the line indicating the error.

Uncaught RangeError: Maximum call stack size exceeded

Related errors: Uncaught exception: RangeError: Maximum recursion depth exceeded, too much recursion, stack overflow

Usually caused by incorrect program logic, which leads to an infinite call to a recursive function.

How to correct the error: check the recursive functions for errors that may force them to make recursive calls forever.

Uncaught URIError: URI malformed

Related errors: URIError: malformed URI sequence

Caused by an incorrect decodeURIComponent call.

How to correct the error: make sure that the decodeURIComponent calls on the error line receive correct input data.

XMLHttpRequest cannot load some / url . No 'Access-Control-Allow-Origin' header is present

Related errors: Cross-Origin Request Blocked: Disables reading the remote resource at some / url

This problem is always associated with the use of XMLHttpRequest.

How to correct the error: make sure that the requested URL is correct and that it satisfies the same-origin policy . A good way to find a problem code is to look at the URL in the error message and find it in your code.

InvalidStateError:

Related errors: InvalidStateError, DOMException code 11

It means that the code called a function that could not be called in the current state. Usually associated with XMLHttpRequest when trying to call functions on it before it is ready.

 var xhr = new XMLHttpRequest(); xhr.setRequestHeader('Some-Header', 'val'); 

In this case, you will get an error because the setRequestHeader function can only be called after calling xhr.open .

How to correct the error: look at the code in the line indicating the error and make sure that it is called at the right moment or adds the necessary calls to this (as with xhr.open ).

Conclusion

JavaScript contains some of the most useless errors I've ever seen, with the exception of the infamous Expected T_PAAMAYIM_NEKUDOTAYIM in PHP. Greater error awareness adds more clarity. Modern browsers also help, since they no longer give out completely useless errors, as they did before.

What are the most incomprehensible mistakes you have encountered? Share your observations in the comments.

PS This translation can be improved by sending a PR here .