JavaScript Error Reference
Errors are an unavoidable part of programming. When an error occurs in a JavaScript program, it produces an error message that describes the problem. This JavaScript Error Reference guide provides a quick reference to common JavaScript errors and the causes behind them.
Syntax Error
A syntax error occurs when the code is not written in a valid JavaScript syntax. This type of error is typically caused by missing a semicolon, misspelling a keyword, or a missing bracket. For example, the following code produces a syntax error:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
let x = 10
y = 20 // missing semicolon
[/dm_code_snippet]
The error message for this syntax error would look something like this:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
SyntaxError: missing ; before statement
[/dm_code_snippet]
Reference Error
A reference error occurs when you are trying to reference a variable or function that does not exist. This type of error is typically caused by misspelling the name of a variable or function, or by trying to use a variable or function before it is declared. For example, the following code produces a reference error:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
let x = 10
console.log(y) // y is not defined
[/dm_code_snippet]
The error message for this reference error would look something like this:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
ReferenceError: y is not defined
[/dm_code_snippet]
Type Error
A type error occurs when you are trying to perform an operation on an incompatible type. This type of error is typically caused by trying to perform an operation on a value that is not of the expected type. For example, the following code produces a type error:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
let x = 10
x = "string" // cannot assign a string to a number
[/dm_code_snippet]
The error message for this type error would look something like this:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
TypeError: Cannot assign to 'x' because it is not a variable
[/dm_code_snippet]
Range Error
A range error occurs when you are trying to access a value that is outside the valid range. This type of error is typically caused by trying to access an array element that does not exist or trying to use a number that is too large or too small for the data type. For example, the following code produces a range error:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
let arr = [1, 2, 3]
arr[4] // index 4 does not exist
[/dm_code_snippet]
The error message for this range error would look something like this:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
RangeError: Index 4 is out of bounds
[/dm_code_snippet]
URI Error
A URI error occurs when you are trying to access a resource that does not exist. This type of error is typically caused by an invalid URL or a missing file. For example, the following code produces a URI error:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
fetch("https://example.com/missing.html") // file does not exist
[/dm_code_snippet]
The error message for this URI error would look something like this:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
URIError: The resource https://example.com/missing.html does not exist
[/dm_code_snippet]
Conclusion
Errors are an inevitable part of programming, but understanding the types of errors that can occur and the causes behind them can help you troubleshoot and debug your code more efficiently. The JavaScript Error Reference guide provides a quick reference to common JavaScript errors and the causes behind them.
