Uncaught Typeerror: Cannot Read Property 'slice' of Undefined
JavaScript Errors and How to Fix Them
JavaScript can be a nightmare to debug: Some errors information technology gives tin exist very difficult to empathise at first, and the line numbers given aren't ever helpful either. Wouldn't it exist useful to take a list where you could wait to find out what they mean and how to fix them? Here you become!
Beneath is a list of the strange errors in JavaScript. Different browsers can requite yous different messages for the same error, then there are several dissimilar examples where applicative.
How to read errors?
Earlier the list, let's apace wait at the construction of an mistake bulletin. Agreement the structure helps sympathise the errors, and you'll have less trouble if yous come across any errors not listed here.
A typical error from Chrome looks similar this:
Uncaught TypeError: undefined is non a role
The construction of the error is as follows:
- Uncaught TypeError: This part of the message is usually not very useful. Uncaught means the error was not caught in a
grabstatement, andTypeErroris the mistake's name. - undefined is non a function: This is the bulletin role. With error messages, yous have to read them very literally. For instance in this case it literally means that the code attempted to utilise
undefinedsimilar it was a function.
Other webkit-based browsers, like Safari, give errors in a like format to Chrome. Errors from Firefox are similar, simply practice not always include the first part, and contempo versions of Internet Explorer also give simpler errors than Chrome – but in this case, simpler does not always hateful better.
Now onto the actual errors.
Uncaught TypeError: undefined is not a function
Related errors: number is non a function, object is not a role, string is non a office, Unhandled Error: 'foo' is not a function, Role Expected
Occurs when attempting to telephone call a value like a function, where the value is not a part. For example:
var foo = undefined; foo();
This error typically occurs if you lot are trying to phone call a part in an object, but yous typed the name incorrect.
var x = document.getElementByID('foo'); Since object properties that don't exist are undefined by default, the higher up would result in this error.
The other variations such every bit "number is not a function" occur when attempting to call a number like it was a part.
How to set up this error: Ensure the function name is correct. With this error, the line number will usually point at the correct location.
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 attempting to assign a value to something that cannot be assigned to.
The near mutual instance of this error is with if-clauses:
if(doSomething() = 'somevalue')
In this instance, the programmer accidentally used a single equals instead of two. The message "left-hand side in assignment" is referring to the role on the left side of the equals sign, and then like you can see in the above example, the left-mitt side contains something you tin't assign to, leading to the error.
How to fix this error: Make sure yous're not attempting to assign values to part results or to the this keyword.
Uncaught TypeError: Converting circular structure to JSON
Related errors: Uncaught exception: TypeError: JSON.stringify: Not an acyclic Object, TypeError: cyclic object value, Circular reference in value argument non supported
E'er caused by a circular reference in an object, which is then passed into JSON.stringify.
var a = { }; var b = { a: a }; a.b = b; JSON.stringify(a); Because both a and b in the to a higher place example have a reference to each other, the resulting object cannot be converted into JSON.
How to fix this error: Remove round references like in the example from any objects you want to convert into JSON.
Unexpected token ;
Related errors: Expected ), missing ) after statement list
The JavaScript interpreter expected something, only information technology wasn't in that location. Typically caused by mismatched parentheses or brackets.
The token in this fault tin can vary – information technology might say "Unexpected token ]" or "Expected {" etc.
How to gear up this fault: Sometimes the line number with this error doesn't betoken to the correct place, making information technology difficult to set.
- An mistake with [ ] { } ( ) is unremarkably acquired by a mismatching pair. Cheque that all your parentheses and brackets have a matching pair. In this case, line number volition often point to something else than the problem character
- Unexpected / is related to regular expressions. The line number for this will commonly be right.
- Unexpected ; is usually caused by having a ; inside an object or array literal, or inside the argument list of a function call. The line number will usually be correct for this case likewise
Uncaught SyntaxError: Unexpected token ILLEGAL
Related errors: Unterminated String Literal, Invalid Line Terminator
A string literal is missing the endmost quote.
How to set this error: Ensure all strings take the correct endmost quote.
Uncaught TypeError: Cannot read holding 'foo' of cypher, Uncaught TypeError: Cannot read property 'foo' of undefined
Related errors: TypeError: someVal is nix, Unable to go property 'foo' of undefined or null reference
Attempting to read zero or undefined every bit if information technology was an object. For example:
var someVal = nil; console.log(someVal.foo);
How to set this error: Normally caused by typos. Cheque that the variables used virtually the line number pointed past the mistake are correctly named.
Uncaught TypeError: Cannot set property 'foo' of null, Uncaught TypeError: Cannot ready property 'foo' of undefined
Related errors: TypeError: someVal is undefined, Unable to ready property 'foo' of undefined or null reference
Attempting to write zip or undefined as if it was an object. For example:
var someVal = cipher; someVal.foo = ane;
How to ready this error: This too is usually caused past typos. Check the variable names near the line the mistake points to.
Uncaught RangeError: Maximum telephone call stack size exceeded
Related errors: Uncaught exception: RangeError: Maximum recursion depth exceeded, too much recursion, Stack overflow
Usually caused past a bug in programme logic, causing space recursive part calls.
How to fix this error: Check recursive functions for bugs that could cause them to keep recursing forever.
Uncaught URIError: URI malformed
Related errors: URIError: malformed URI sequence
Caused past an invalid decodeURIComponent call.
How to prepare this fault: Check that the decodeURIComponent call at the error's line number gets correct input.
XMLHttpRequest cannot load http://some/url/. No 'Admission-Control-Allow-Origin' header is present on the requested resource
Related errors: Cross-Origin Asking Blocked: The Same Origin Policy disallows reading the remote resources at http://some/url/
This fault is e'er caused past the usage of XMLHttpRequest.
How to fix this error: Ensure the request URL is correct and information technology respects the aforementioned-origin policy. A skillful way to notice the offending lawmaking is to look at the URL in the mistake message and detect it from your code.
InvalidStateError: An effort was made to use an object that is non, or is no longer, usable
Related errors: InvalidStateError, DOMException code 11
Means the lawmaking called a office that you lot should not call at the current state. Occurs unremarkably with XMLHttpRequest, when attempting to call functions on information technology before it'southward fix.
var xhr = new XMLHttpRequest(); xhr.setRequestHeader('Some-Header', 'val'); In this case, you would go the mistake considering the setRequestHeader part can only be chosen after calling xhr.open.
How to fix this error: Look at the code on the line pointed by the error and make certain it runs at the correct time, or add any necessary calls before it (such as xhr.open up)
Determination
JavaScript has some of the about unhelpful errors I've seen, with the exception of the notorious Expected T_PAAMAYIM_NEKUDOTAYIM in PHP. With more familiarity the errors starting time to make more than sense. Modern browsers besides help, as they no longer give the completely useless errors they used to.
What's the nearly confusing error you've seen? Share the frustration in the comments!
Want to larn more about these errors and how to forestall them? Find Problems in JavaScript Automatically with ESLint.
About Jani Hartikainen
Jani Hartikainen has spent over 10 years building web applications. His clients include companies similar Nokia and hot super underground startups. When not programming or playing games, Jani writes nigh JavaScript and high quality code on his site.
codeutopia.netjhartikainenPosts
Uncaught Typeerror: Cannot Read Property 'slice' of Undefined
Source: https://davidwalsh.name/fix-javascript-errors